Using CSS to create rollover buttons is a much better method than javascript. Not only does it allow users who don't have javascript enabled to view your buttons, but it also lets you create cleaner code and allows you to update the buttons quickly when needed.

How It Works

CSS rollovers work by using background images and the :hover event on an <a> tag. One standard image is used as the background, and only half of it is originally shown. When a user hovers over the button, the background position is changed, showing the other half of the image. Don't worry if this doesn't make sense – you will understand by the end of this tutorial.

Creating The Image

The first step in creating a rollover button is to create your image. Unlike traditional rollovers, CSS rollovers only require one image to be used – which contains both rollover states of the button. In order to create this image, you must first decide how big you want your button to be.

For this tutorial, I want our button to be exactly 120px by 120px in size. Because we need both rollover states to be in the image, we need to double the height of it. Our working image is now 120px by 240px in size.

In Photoshop, create a guide at the mid point of your image. In our case, this is at the 120px height mark. To do this, go to View > New Guide..., select horizontal and type in the height of your button. This guide will act as a boundary while designing.

Begin designing your standard button above the new guide you just created. This is what the user will see before they rollover the button.

After your standard design is done, duplicate it and move it below the guide. Change the look of the duplicated design to reflect the rollover state of the button. In order to work properly, it is important that the rollover button is in the exact same position of standard button, so you may need to create more guides to make this work.

Save the image for web in a gif or jpg format.

The Code

After you have created your image (which is probably the hardest part of the whole process) you can begin the coding process.

In order to work, each button must have a parent <div> tag which the <a> tag can sit inside of. This is declared as a class of "Button" in our CSS. It contains the proper width and height of the rollover, and contains an empty <a> tag inside.

The CSS for the <a> tag is where the magic happens. First, you must declare the display of the <a> as "block". By default all <a> tags are inline page elements. This means that no matter what styles you have applied to them, they can't carry a width or height, and will only be as big as the content inside. Since we need a width and height for our button, we must change the display to "block". By changing the display, we allow the <a> tag to inherit the properties of a block-level element.

The <a> tag also has a background image applied to it. The background: style first declares where the background image is located. After that, we declare that it shouldn't repeat itself, and that its position should be to the top, and to the left. The background position is key – as it is controls what portion of our button should be shown to the user.

On the a:hover event, we change the background position to the bottom, and to the left. This moves our background up, showing the rollover state that we created at the bottom of our initial image.

The HTML:

<div class="Button"><a href="link.html"></a></div>

The CSS:

.Button {
width: 120px;
height: 120px;
}

.Button a {
display: block;
width: 120px;
height: 120px;
background: url(images/button.gif) no-repeat top left;
}

.Button a:hover {
background-position: bottom left;
}

Once this technique is learned, creating rollovers will never be easier. The final result will look like the following: