CSS Rollover Buttons

Rollovers are a nice way to add visual feedback to your website's buttons. As a visitor moves their mouse over a rollover button, it changes to indicate that it's clickable.

In the bad old days of HTML, the only way to create a rollover was to use JavaScript to swap the two button images. While this works, it does rely on JavaScript being enabled in the browser. It also adds a fair bit of code bloat to the page, meaning longer download times, and more coding for you.

Thankfully, these days you can create a nice rollover effect using pure CSS; no JavaScript required! Roll your mouse over this button, which is created using just HTML, CSS and a single image:

So how's it done? Well, it all centres around the :hover pseudo-class in CSS. Using this pseudo-class, you can style a link both in its normal state and in its hover (rollover) state. By making the link a block element and giving it a background image, we can turn the link into a button. We then simply jiggle the background image around to create the rollover effect.

The button image

The trick to making this type of rollover work smoothly is to have both the normal and rollover images stacked in a single GIF image, with the rollover state below the normal state. Here's our button image - it's 107 pixels wide and 46 pixels tall:

On the one hand, this is slightly inconvenient as it means you have to use Photoshop - or a similar image editor - to create a single image containing your normal and rollover images. You can't just grab normal and rollover button images from somewhere and use them as they are. Of course, this is no problem if you're creating your site design in Photoshop anyway.

On the other hand, this approach avoids issues with flickering and preloading, which we'll talk about in more detail at the end of the article. It's also nice, in a way, to have both the normal image and the rollover image packaged within a single image file; it's easier to keep track of your button images, and you only have half as many image files to worry about!

The markup

The HTML for our button is wonderfully simple. In fact it's just a link with anid, and a span element wrapped around the link text:

<a id="emailUs" href="#" title="Email Us"><span>Email Us</span></a>

We give the link an ID - in this case, "emailUs" - which allows us to style the link via our CSS. We also place the actual link text inside a spanelement. This means that we can hide the link text with our CSS and display the image instead, yet the link still looks like a regular text link to browsers not using the style sheet - such as a search engine spider or a text-only browser, for example.

The CSS

To turn our regular text link into a rollover button, we apply the following CSS:

#emailUs
{
  display: block;
  width: 107px;
  height: 23px;
  background: url("emailUs.gif") no-repeat 0 0;

}

#emailUs:hover
{ 
  background-position: 0 -23px;
}

#emailUs span
{
  position: absolute;
  top: -999em;
}

First we change our emailUs link from an inline element to a block element with display:block. This allows us to give the link a width and height, as well as set our button image as a background. We set the width of the link element to the width of our GIF image, but we set its height to half the height of the GIF; that is, the height of one of the button images. This means that just the top, normal button image appears within the link by default. The bottom, rollover button image is cut off, and therefore remains hidden.

Then we select the link's :hover pseudo-class to style our rollover state. This is simply a matter of shifting our background GIF up by 23 pixels, or half the GIF's height. This hides the normal button image above the top of the link element, and reveals the rollover button image within the link; you can think of it as sliding the GIF upwards within the "window" of the link. When the visitor moves their mouse away from the link again, the button GIF slides back down 23 pixels, returning to its default position, with the normal button image revealed within the link.

Finally, all we need to do is set position: absolute and top: -999em on the span element inside the link. This moves the link text way above the top edge of the browser window, effectively hiding the link text for browsers that support CSS and images.

And that's all there is to it!

Why not just hide the span element using display: none? The main reason is that we want screen readers to read out the link text. Most screen readers won't announce text that is hidden with display: none.

Creating more than one button

If you want to create many rollover buttons in the page - for example, as part of a menu - copy and paste the HTML and CSS, giving each button a unique id in both the HTML and the CSS and, of course, changing the background image for each button in the CSS.

Alternatively, you could style the link text to be in the centre of your button image, rather than being hidden; you'd then only need one (blank) button image for all the menu options. The tradeoff with this approach is that you lose some control over the look of your button text, and the buttons don't generally look as nice.

The rationale

You may be wondering why we've taken the approach of having both the normal and rollover images within the one GIF image. In fact you could easily rework the CSS to include two separate images, as follows:

  #emailUs
  {
    display: block;
    width: 107px;
    height: 23px;
    background: url("emailUsNormal.gif") no-repeat 0 0;

  }

  #emailUs:hover
  { 
    background: url("emailUsRollover.gif") no-repeat 0 0;
  }

What you'll find, though, is that the button "flickers" the first time you move the mouse over it, as the browser fetches emailUsRollover.gif from the server. In other words, most browsers don't preload the background image of the :hover state. By combining both our normal and rollover states in a single GIF, we're forcing the browser to "preload" the rollover state image as it fetches the normal state image.

An alternative approach might be to use a JavaScript preloader, or a hiddenimg element in the page, to preload emailUsRollover.gif, but then we're kind of losing the point of having a non-JavaScript, pure-CSS rollover!

This uses an inline imgelement in the markup for the normal state, and a background image in the CSS for the rollover state. To create the rollover effect, it toggles the visibility of the inline image. This means that both images are preloaded with the page, avoiding any flickering effects. It also uses markup to display the button text - a technique that we touched on earlier - meaning that you only need one button image pair for a whole menu.

The drawbacks with the Trifecta button are, firstly, that it requires an extradiv wrapped around your link, and secondly, that you end up with an inline image in your markup. Having an inline image means more markup, and also means that you're fairly committed to having image buttons on your site; it's harder to replace your image rollovers with pure CSS versions, or with simple text links, later. However, the Trifecta is a nice solution if you like the idea of separate rollover images.

There's one gotcha with the single-GIF approach, and that's when using our old friend, Internet Explorer 6. If you have this browser set to always fetch files from the server (Tools > Internet Options > Temporary Internet Files > Settings > Check for newer versions of stored pages: Every visit to the page), you'll get horrid flickering each time you move the mouse over the button.
Luckily, it tends to be mainly Web developers that have this setting enabled; most visitors leave IE6 at its default setting of "Automatically".
Microsoft fixed this problem in IE7. Also note that the Trifecta button doesn't suffer from the problem in IE6.