Create rollover button without JavaScript

Intro

In this tutorial I want to share a little trick I recently picked up. The basic idea is that instead of using JavaScript to create rollover buttons, you use CSS style sheets.

Why CSS and not JavaScript?

Three reasons:

1. It's simpler to create - writing couple of extra styles is much easier than couple of extra functions.
2. It's easier to modify - for the same reasons it's simpler to create.
3. It works faster - JavaScript ads on an extra layer of processing to the browser.

It's also way cooler... but that's just the geek in me.

In short

The basic implementation is very easy. You use CSS to create a button element where the button image is the background of the element. The image itself is twice as high or wide as the actual button, and it shows both states of the button, each on its own half. Then using the :hover property of CSS you shift the (background) image of the button to show the "mouseover" state of the button.

Break it down

So let's say we went through the design process and created the button that we want, with both on (mouse over it) and off (mouse not over it) states. Usually you would save each state in a separate image, like button.on.jpg and button.off.jpg. For this however what you need to do is combine them into one image where one half has the off state, and the other half has the on state. Something like this Example Button

Now, let's write the HTML for this button.

<a href="somelink" class="button"></a>

You can also use div if the button calls some JS code, i.e.

< div onclick="some js function" class="button">< /div>

I put the spaces between < and div so that the editor shows it as text, instead of interpreting it as an actual tag

Or you can even apply that to actual button element, like this

<button type="submit" class="button"></button>

The CSS will be very similar regardless of which of these you use - you'll just need to account for the differences in default styles of these elements. For example, div tag doesn't require an explicit display:block property, while anchor tag does. Another thing to keep in mind is that IE6 doesn't understand the :hover attribute for any tag except for anchor, which means if you need IE6 compatibility any button like this will have to be an anchor. Also, if you're using other tags you might need to set a particular doctype to make sure the browser properly handles the CSS states. The anchor tag should work even w/o any doctype declared.

So here is the first part of the CSS for the button given the dimensions of 180x60 pixels.

a.button {
  display: block;
  width: 180px;
  height: 60px;
  background-image: url(path to image);
  background-repeat: no-repeat;
  background-position: 0 0;
}

You can also shorten the background attributes to this

background: url(path to image) 0 0 no-repeat;

If you wish to add background color just put it in front of the url part.

And here is the rollover part

a.button:hover {
  background-position; 0 -60px;
}

So what we did here is shifted the background vertical position by 60 pixels up, thus showing the second half of the image. (The horizontal position stays the same, at 0.)

And that's all there is to it.

At this point it's worth pointing out another advantage of this over JS. Since both states of the button are in one image there is no need to preload the "on" state images. If the off state is showing then the on state will show up with no delay. Also of course it works with JS disabled.

Finally, another neat thing about this method is that you can also define in this way :active and :visited states for anchor-based buttons. Simply create an image with 4 states in it and shift background by appropriate amount based on the state.

• This page was last modified 23:17, 12 July 2008.