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.
Give me feedback on this page/code
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>