CSS Navigation Buttons or menu

This is a great example on how you can use CSS for the navigation
on your website. No images required, so it loads fast, but still gives you mouseover effects.
Play around with the colors to change the buttons.

Tested on: IE6 – Firebird 0.7 – Opera 7 – Netscape 6.2.1
Does not work for: Netscape 4.7
Screenshots from other browsers are greatly appreciated.

Example:

CSS Button 1
CSS Button 2
CSS Button 3
CSS Button 4
CSS Button 5

CSS:


<style type="text/css">
<!--
a.button {
font-weight: bold;
font-size: 9px;
font-family: Verdana, Arial, Helvetica, sans-serif;
padding: 4px 8px;
border-top: 1px solid white;
border-right: 1px solid black;
border-bottom: 1px solid black;
border-left: 1px solid white;
text-align: center;
min-width: 75px;
text-transform: uppercase;
}
a.button:link {
background-color: #060;
color: #FFF;
text-decoration: none;
}
a.button:visited {
background-color: #060;
color: #fff;
text-decoration: none;
}
a.button:hover {
background-color: #060;
color: red;
border-color: black white white black;
text-decoration: none;
}
a.button:active {
background-color: #369;
color: #ccc;
text-decoration: none;
}
-->
</style>


HTML:


<a href="#" class="button">CSS Button 1</a>
<a href="#" class="button">CSS Button 2</a>
<a href="#" class="button">CSS Button 3</a>
<a href="#" class="button">CSS Button 4</a>
<a href="#" class="button">CSS Button 5</a>