Creating buttons for the navigation bar of your website might mutate into a pretty mess, but it shouldn’t. The most simple (fully graphical) solution, creating two images for every menue item, definetly won’t challenge your brains, but will cause headaches, if you intend to change a wording or even integrate more than one language.
The following method provides a pretty simple, easily edible, fully dynamic and completely cross browser functional way to create a cool and stylish navigation using only two graphics, text and simple CSS.

View a plain demo here.

So here we go:

First of all design two (or three, if the focus state should be used, too) buttons, then cut the left part of the two states and paste them into a single graphic above each other. Add a little space so the text won’t stick too close on the edge, which should, depend on the design somewhat like this:

Then repeat these steps for the right end of the button:

That’s it for the graphical issue, the HTML is just a div container and an unordered list in the inside:


<div class="mouseover">
<ul>
<li><a href="#"><span>Item 01</span></a></li>
<li><a href="#"><span>Item 02</span></a></li>
<li><a href="#"><span>long Item name 03</span></a></li>
</ul>
</div>


The only things to pay attention is the class assigned to this div tag as it hands down all the attributes to its tags within and that the linktexts are embedded in span tags.

Now as all the action is done via CSS, we have to get into details:


.mouseover ul {list-style: none;}
.mouseover ul li {
display: inline;
font-size: 14px;
line-height: 14px;
font-weight: bold;
}

For the unordered list the list-style value “none” is mandatory as any other value like “square” or “circle” etc. would avoid a proper alignment of the navigation elements.
The list elements must be displayed “inline” otherwise they show up vertically ordered. If you wish them to do so, just drop “display: inline;”.
Besides that the apperance of the textlinks of the buttons can be edited here individually by additonal CSS attributes.

.mouseover ul li a {
padding: 0 0 0 9px;
background: url(button-left.gif) no-repeat;
float: left;
}

The padding values have to be set individually, as they depend on the measurements of the left graphic.
The “float: left” attribute is mandatory to assure both graphics are displayed besides each other.


.mouseover ul li a span {
padding: 9px 9px 9px 0;
background: url(button-right.gif) no-repeat right top;
display: block;
float: right;
color: #666;
}


As before please adjust the padding values as they fit the button layout.
The background attribute contains values as the image path and “right” and “top”. The last two are important as the grant that the alignment of the background is not influenced by the padding values. Setting the background alignment value “right” is the reason why the button lenght fits for a different number of characters of the textlink.
(If a textlink is to long, though and gap appears, simply expand the lenght of the background on the left side.)


.mouseover ul li a:hover {
background-position: 0 -36px;
}

The attribute “background-position” for the element “a:hover” is defined by the two values “0”, which aligns the graphic to position 0 of the x-axis and to -36 pixels on y-axis. The y-axis value derives from the half of the overall height of the background graphic and has to be adjusted, if the height of the graphic is not equal to 72 pixels.


.mouseover ul li a:hover span {
background-position: 100% -36px;
color:#fff;
}

The value of the y-axis of the attribute “background-position” must be set to “100%” so the graphis is aligned to the right.
Additional font settings of the mouse over state might be defined here, too.

…and that’s it!
Happy coding!