Processing ...

Processing ...

CSS only single image fast rollover

Written by : Gerrit van Weele , 2013-05-13

"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:


.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;
}

and HTML:

div class="contact-us">
    Contact Us
/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 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

tag but you can use

.
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].