By:Mark Angeletti, Published:2004-1-4

Be sure to check out the new Search-This blog for more great CSS articles!

There are many different button-rollover tutorials available on the web, some JavaScript and some CSS, but none of the ones I have 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.

Why’s it called the Trifecta button anyway?

Trifecta is a betting term in which the bettor must pick the first three winners in the correct sequence – this CSS button has 3 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 is well known that search engines give greater value to text links than that of just images. Our CSS button allows for both a graphical image to swap based on mouse state 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. Depending on the speed of your connection you may have to look close in order to notice this. This is a common problem for many CSS buttons and no preloading of images will help. With the Trifecta button you don’t have this problem and no preloading is necessary.

What makes the Trifecta button the Trifecta?

This next feature is what really seperates the Trifecta button from the rest. 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 3 combo. Let’s have a look at the code.

The Code

  1. .cssnav {
  2. position: relative;
  3. font-family: arial, helvetica, sans-serif;
  4. background: url(overbtn.jpg) no-repeat;
  5. white-space: nowrap;
  6. display: block;
  7. width: 211px;
  8. height: 44px;
  9. margin: 0px;
  10. padding: 0px;
  11. }
  13. .cssnav a {
  14. display: block;
  15. color: #000;
  16. font-size: 11px;
  17. width: 211px;
  18. height: 44px;
  19. float: left;
  20. text-decoration: none;
  21. }
  23. .cssnav img {width: 211px; height: 44px; border: 0; }
  24. * html a:hover {visibility:visible}
  26. .cssnav a:hover img{visibility:hidden}
  28. .cssnav span {
  29. position: absolute;
  30. left: 35px;
  31. top: 15px;
  32. margin: 0px;
  33. padding: 0px;
  34. cursor: pointer;
  35. }
  3. <div class="cssnav">
  4.  <a href="" title="your_keyword">
  5.  <img src="downbtn.jpg" alt="your_keyword" />
  6.  <span>your_keyword</span></a>
  7. </div>

Here is a working example of the above code. And a horizontal example.

Yet another example in my blog. The yellow tabs are trifecta buttons.


The CSS rollover Trifecta button allows us to swap images on mouse state while still keeping text in our link allowing us the best of both worlds – graphics for our 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 3 times within any given link.

Thanks to Paul O’Brien and Gavin Benda for their work in the development of the Trifecta button

mulberry sale spyder womens jacket cheap new balance 574 mulberry outlet cheap new balance 574 arcteryx outlet mulberry sale spyder womens jacket mulberry sale spyder womens jacket mulberry outlet mulberry outlet new balance 574

Popular Articles

Top 10 Commentators

Subscribe to this feed! Subscribe by Email!

Random Bits Podcast

You need to download the Flash player from Adobe

Other Sites