themorgue.org

The last article I posted showed how to use a single button image to create variable width buttons with custom backgrounds. That’s all well and good, but what about hover effects? You can change the look of your buttons, including the background image very easily.

The first thing we need is an image that contains both the default and hover versions of the button. Put the default image on top and the hover image below it as shown here.

Now all we do is add new rules for the hover action. All the new rules have to do is change the background-position so that rather than getting the default button image, we reposition the background image so that we see the hover background image. To do this, we simply bump the background image up by the height of the button (22px in this case). We also added a text color change just for kicks. Here are the CSS additions for the hover effects.

#dialog a:hover, #dialog a:hover span {
    color: #2A5E5E;
    background-position: left -22px;
}
#dialog a:hover {
    background-position: right -22px;
}

With these rules in place, hovering over a button gives the following effect.