CSS rollovers, without the flicker

Written by Joe on Sunday, February 28, 2010

Rollover buttons are an efficient way to indicate to a user that the an image or "button" is clickable.  When the user moves their mouse over the button, the background changed indicating that that button is clickable.

In the past this was done with Javascript.  You would need to set up each button seperately and as you can imagine the code gets long an unmanagement.  Not to mention if a user has Javascript turned off, they won't get to see your hard work to create the rollover.

In this article I will show you how to create a rollover with pure CSS (and a little photoshop) with no flicker.

Let's say you're making a contact us button, and you want it to look a little different and stand out from the copy on your page.  So you design two images:

Your HTML would look something like this:

<a href="yourlink.com" class="contact-button"></a>

And your CSS should look like this:

a.contact-button
{
     display:block;
     width:168px;
     height:47px;
     background-image:url("images/contact.jpg") no-repeat top left;
}

a.contact-button:hover
{
     background-image:url("images/contact-over.jpg") no-repeat top left;
}

Simple enough right?  If you use this code and view your HTML document in a browser, you will notice a "flicker" when you move your mouse over the button.  This is cause by a delay in removing the old image and loading the new image.

No eleviate this issue, you need to create one image with both the "over" state image and the original, the original on top.  With a few changes to your css you will have a clean functional image rollover with no flicker.

Your new image would look like this:

Your HTML would look the same as before:

<a href="yourlink.com" class="contact-button"></a>

Your CSS will have to change slightly:

a.contact-button
{
     display:block;
     width:168px;
     height:47px;
     background-image:url("images/contact-both.jpg") no-repeat top left;
}

a.contact-button:hover
{
     background-image:url("images/contact-both.jpg") no-repeat bottom left;
}

Rather than loading a new image, the image is simply moved up to display the "down" state of the button when hovered, and shifted back up when you move your mouse away.

Like what you’ve read?

Link back to us.
http://www.revolutionunlimited.com/news-and-articles/css/2010-02-28/css-rollovers-without-the-flicker/

OR Join Our Mailing List