October 2004
CSS rollover buttons
There are many different button-rollover tutorials available on the web, some JavaScript and some CSS, but none of the ones I've seen yet match that of the Trifecta button. Let's start with what makes the CSS rollover Trifecta button different from the many other rollovers you may have already seen.
Trifecta is a betting term in which the bettor must pick the first three winners in the correct sequence - this CSS button has three key features that separate it from the rest and make it a winner. Let's have a look:
Graphics and text - the best of both worlds
It's well known that search engines give greater value to text links than images. Our CSS button allows for both a graphical image and text to be within the link. This gives us the best of both worlds - a nice graphical image swap for our viewers and text for the search engines. Yes, many other CSS buttons do this too, but read on.
No flicker and no preloader
This next one is big and is where many other CSS rollover buttons fail. Internet Explorer is unable to cache background images which causes the button to flicker as it's loaded. With the Trifecta button you don't have this problem and no preloading is necessary.
Search engine friendly
You know that having the title attribute in your href tags is a good thing for the search engines, right? You also know that having the alt attribute in your image tags is a good thing for search engines. And of course you know that the anchor text for a link is very important for search engines, but did you ever think you could get all three of these key elements in a single link? Well all 3 of these search engine friendly features are present in the Trifecta button - thus making the winning three-combo.
The CSS code
Advert: User experience consultant job vacancy
Webcredible currently has a job vacancy for a user experience consultant!
We're looking for someone to work on a variety of challenging usability, IA & design projects for household name clients.
If this sounds interesting then read about our user experience consultant job vacancy and send over your CV!
.cssnav
{
position: relative;
font-family: arial, helvetica, sans-serif;
background: url(overbtn.jpg) no-repeat;
white-space: nowrap;
display: block;
width: 211px;
height: 44px;
margin: 0;
padding: 0;
}
.cssnav a
{
display: block;
color: #000000;
font-size: 11px;
width: 211px;
height: 44px;
display: block;
float: left;
color: black;
text-decoration: none;
}
.cssnav img
{
width: 211px;
height: 44px;
border: 0
}
* html a:hover
{
visibility:visible
}
.cssnav a:hover img
{
visibility:hidden
}
.cssnav span
{
position: absolute;
left: 35px;
top: 15px;
margin: 0px;
padding: 0px;
cursor: pointer;
}
The HTML code
<div class="cssnav">
<a href="http://www.URL.com"><img src="downbtn.jpg" alt="Alternative text" /><span>your keyword</span></a>
</div>
Check out these two working examples, one vertical and one horizontal.
Summary
The CSS rollover Trifecta button allows us to swap images while still keeping text in our link, allowing us the best of both worlds - graphics for human viewers and text for the spiders. The Trifecta button also deals with IE's inability to cache background images. Lastly, the Trifecta button naturally encourages your keyword(s) to be placed three times within any given link.
This article was written by Mark Angeletti. Mark is founder and editor of Search-This.com, maker of the Search Engine Decoder.
What next?
- Read more CSS articles on this website
- Get a highly accessible CSS website through our accessible web design expertise
- Optimise the accessibility of your website with our accessibility consulting services
- Get our accessible and usable CMS so your site offers outstanding accessibility
- Attend our interactive intermediate CSS training and advanced CSS training courses
Republish our CSS articles
All our CSS articles are available for republishing, provided the author bio and links in the bio remain intact. You can also use our RSS news feed to republish all of our CSS articles.
Bookmark or recommend this article
Add this article to:
You can also tell a friend about this article right now!