CSS only single image fast rollover

"Contact Us" rollover button.

How to create a single image 3 state fast rollover "button" ?
First you need to create your buttons in your graphics editor program, sample:

I have used a PNG image format for background transparency reasons, the image is a bit big.
You can create a JPG version smaller image file, or try GIF if you need transparency.

The CSS code for rollover:

<style type="text/css">
 .contact-us a {
 outline: none;/* get rid of dotted borders in FireFox */
 text-indent: -5000px ;/* this move the text outside of the screen area */
 display:block;
 width:120px;
 height:125px;
 background: url("contact_us.png") 0 0 no-repeat;
 }

 .contact-us a:hover {
 background-position: -114px 0;
 }

 .contact-us a:active {
 background-position: -228px 0;
 }
</style>

and HTML:

<div class="contact-us">
    <a href="#">Contact Us</a>
</div>

Live Button:

Contact Us

How does this work ?
Based on Fast Rollovers Without Preload , in order to use it for image links only I have added the <span> tag and added option display:none; in CSS, doing this is not the best way as it may prevent  some screen reader's to access this link.
We use now text-indent: -5000px; text-decoration: none; this moves the text "outside" of the screen, but when clicked you will get some "dotted borders" along the screen. This has been fixed using:

outline: none;/* get rid of dotted borders in FireFox */

 
This method is great for faster image preloading and less job on image slicing.
The trick is by changing background-position: -114 0; you actually make image horizontal "movement" for second image and than third one background-position: -228px 0;.
The background-postion values will depend on your own image size.
I have used <p> tag but you can use <div>.
The LIVE example below demonstrates in three steps how it works 1.LINK , 2.HOVER, 3.ACTIVE (CLICK).
The RED square is the real size of image, first button is "Visible Area".
Please rollover the first BLACK button than CLICK (interactive demo).

I like this technique and decided to share it with you.
*All graphics used herein are created by Femi Hasani [www.vision.to].

Related Pages