Trifecta Button

Author Mark Angeletti at search-this.com

You know that having the title attribute in your href-tags is a good thing for the search engines, no? Apparantley it is a well known fact that search engines give greater value to text links than that of just images.

The CSS rollover Trifecta button allows you to swap images on mouse state while still keeping text in your link allowing you 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 3 times within any given link.

CSS Magpie.co.ukCSS Magpie
CSS Tips And TricksTips And Tricks
Copy And Paste CSS CodesCopy And Paste
Add CSS Buttons To Your SiteAdd To Your Site
Grab The CodeGrab The Code

To save, right click on the image and 'save picture as' or 'save image' to a folder on your local drive.

downbtn (1K)

overbtn (1K)

View this menu horizontally arrow-right (1K)

CSS

.cssnav
{
position: relative;
font-family: arial, helvetica, sans-serif;
background: url(images/overbtn.png) no-repeat;
white-space: nowrap;
display: block;
width: 120px;
height: 35px;
margin: 0;
margin-left:0px;
padding: 0;
}

.cssnav a
{
display: block;
color: #000000;
font-size: 12px;
width: 120px;
height: 35px;
display: block;
float: left;
text-decoration: none;
}

.cssnav img
{
width: 120px;
height: 35px;
border: 0
}

* html a:hover
{
visibility:visible }

.cssnav a:hover img
{
visibility:hidden
}

.cssnav span
{
position: absolute;
left: 15px;
top: 10px;
margin: 0px;
padding: 0px;
cursor: pointer;
}

HTML

<div class="cssnav">
<a href="#"><img src="images/downbtn.png" title="cssmagpie.co.uk" alt="CSS Magpie.co.uk" /><span>CSS Magpie</span></a></div>