1. User experience
research & design
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:
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.
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.
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.
.cssnav
{
position: relative;
font-family: arial, helvetica, sans-serif;
background: url(overbtn.jpg) no-repeat;
white-space: nowrap;
display: block;
width: 211px;
Graphics and text - the best of both worlds
No flicker and no preloader
Search engine friendly
The CSS code
Page 1 of 4CSS rollover buttons
8/25/2010http://www.webcredible.co.uk/user-friendly-resources/css/rollover-buttons.shtml

2. 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;
}
<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
1
and one horizontal
2
.
The HTML code
Page 2 of 4CSS rollover buttons
8/25/2010http://www.webcredible.co.uk/user-friendly-resources/css/rollover-buttons.shtml

3. 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
3
, maker of the
Search Engine Decoder
4
.
http://www.search-this.com/css_buttons2.html1.
http://www.search-this.com/css_buttons3.html2.
http://www.search-this.com3.
http://www.search-this.com/search_engine_decoder4.
../web-dev/5.
/services/web-design.shtml6.
/services/accessible-cms.shtml7.
/services/css-training-fund.shtml8.
/services/css-training.shtml9.
/services/jquery-training.shtml10.
Summary
Read more web development articles
5
on this website•
Get a highly accessible CSS website through our accessible CSS web design
6
expertise•
Get our accessible and usable CMS
7
so your site offers outstanding accessibility•
Attend our interactive intermediate CSS training8
, advanced CSS training9
and jQuery
training
10
courses
•
What next?
Links
Tel Fax E-
mail
Webcredible, 99 Mansell Street, London, E1 8AX, UK
0870 242 6095 020 7481 2569
info@webcredible.co.uk
Page 3 of 4CSS rollover buttons
8/25/2010http://www.webcredible.co.uk/user-friendly-resources/css/rollover-buttons.shtml

4. Page 4 of 4CSS rollover buttons
8/25/2010http://www.webcredible.co.uk/user-friendly-resources/css/rollover-buttons.shtml