ZachSchneider [dot] com

The CSS method uses what is known as an image sprite to load all the rollover effects as a single image and we then use CSS to do the transition. To create the image sprite just create a single image containing all of the individual transitions.  Once you have your image sprite you just need the HTML and CSS code:

CSS Code:
a.grnBTN {
display: block;
width: 200px;
height: 45px;
text-decoration: none;
background: url(“greenBTN.png”);
background-position: 200px;
}

a.grnBTN:hover {
background-position: 0 0;
}

.displace {
position: absolute;
left: -5000px;
}

HTML Code:

<a href="#" class="grnBTN" title="Image Title">
<span class="displace">Alternative Text</span>
</a>

• The width and height values in a.rollover are the size of the original image.
• The value of background-position is that of the original image width – since we are literally moving from one part of the image sprite to another.
• The <span> tag was included with a text alternative to the image and displaced it off the side of the visible screen so that screen readers will read it and in the event of no CSS support a text link will be shown instead.

Working Example:

Alternative Text