Navigation Button Rollover

Posted on Fri, 2006-03-03 18:16

Rollover Navigation Button

This tutorial with guide you through how to make a rollover navigation button that we made in this tutorial

1.

Use this CSS code:

Main Link Code:

 

.menu a {
background: #EEEEEE url(navbar.jpg) top left no-repeat;
height: 20px;
display:block;
width: 80px;
text-align:center;
font-size: 10px;
color:#FFFFFF;
padding-top: 5px;
text-decoration:none;
}

 

Hover Link Code:

.menu a:hover {
background-position: 0px -25px;
height: 20px;
text-decoration:none;
color:#FF9900;
}

 
2.

Use this HTML:

 

<div class="menu">
<a xhref="http://skeletorscorpse.com/joomla/#">Link 1</a>
<a xhref="http://skeletorscorpse.com/joomla/#">Link 2</a>
<a xhref="http://skeletorscorpse.com/joomla/#">Link 3</a>
<a xhref="http://skeletorscorpse.com/joomla/#">Link 4</a>
<a xhref="http://skeletorscorpse.com/joomla/#">Link 5</a>
</div>

 
3.

For the background we apply the image and set the height to 20px so that it only shows the first 20px. But this will put the text at the top of the button and we don't want this so we need to add padding-top: 5px; This will move the image 5px up and move the text to the middle.

For the Rollover we just have to move the image up 25px. To do this we use background-position: 0px -25px; this moves the background up 25px which then shows the bottom button in the image.