Creating CSS Rollover Buttons
There are many different alternatives when it comes to creating rollover buttons for the web with the most popular method being JavaScript. This presents many obstacles: You need to write a script in order to preload the image into the browsers cache, the images will flicker in some browser versions (Internet Explorer in particular due to not being able to cache images) and the most important: using images as text replacement is not search engine friendly.
Now there’s an alternative solution with CSS that eliminates all of these problems!
With this particular technique we will combine the power of images (user friendly and eye candy) and text (search engine friendly) to create a nice looking CSS rollover button with no flickering and preloading necessary.
In this example I used only 2 images for the background, one for the normal state of the button and one for the rollover state:
What we will do is change the background by replacing the image every time the user hovers the link and to make a nice contrast we will also change the color of the text.
The CSS Code:
#nav {
padding: 0;
list-style-type: none;
float: right;
font-weight: bold;
}
#nav li {
float: left;
}
#nav a {
float: left;
width: 97px;
height: 60px;
text-align: center;
color: #FFFFFF;
text-decoration: none;
background: url(image_rested_state.jpg) no-repeat;
border-right-width: 1px;
padding-top: 10px;
}
#nav a:hover {
background: url(image_rollover.jpg) no-repeat;
color: #000000;
}
The XHTML Code:
<ul id="nav">
<li><a href="page1.html">PAGE 1</a></li>
<li><a href="page2.html">PAGE 2</a></li>
<li><a href="page3.html">PAGE 3</a></li>
<li><a href="page4.html">PAGE 4</a></li>
<li><a href="page5.html">PAGE 5</a></li>
</ul>
Summary:
This CSS technique allows us to swap images while still keeping text in our link, giving us the advantage of having graphics for human viewers and text for Web Crawlers.
