CSS Examples CSS Drive horizontal menu buttons

Author: CSS Drive

This is the same horizontal menu used here on CSS Drive. It dressed up regular <a> elements to be 2-state rollover menu buttons. The combination of "display: block" and "float: left" makes this possible.

The HTML:

<div class="hbuttons">
<a href="http://www.cssdrive.com">Home </a> <a href="http://www.cssdrive.com/index.php/main/submit/">Submit </a> <a href="http://www.cssdrive.com/index.php/main/resources/">Resources </a> <a href="http://www.cssdrive.com/index.php/main/contact/">Contact </a>
</div>
<div style="clear: left;"></div>

The CSS:

.hbuttons a{
display: block;
text-decoration: none;
font: bold 13px Arial;
color: black;
width: 78px;
height: 23px;
float: left;
display: inline;
margin-right: 8px;
background-image:url(tabsquare.jpg);
background-repeat: no-repeat;
padding-top: 4px;
text-align:center;
}

.hbuttons a:hover{
background-image:url(tabsquareover.jpg);
}

The images:

Comments (18)