Buttons with Rollover Effect

Intro
In this article, I am going to explain how to make a simple link that looks like a button with roll over effects using only CSS.

First we have to decide on the dimensions of the image etc. And make an image that has the following format: The default image and then the rollover images.


The above image is 382x225 containing 3 images each of 382x75 stacked top to bottom.
The first image is the default image. The second is the hover image i.e., the image that is shown when the mouse is over the image. The third image is not used.

So we have to design the button
HTML:

<a href="http://www.answers.com/unicode%20mirror" class="ah"></a>

Styles:

a.ah
{
display:block;
width:382px;
height:75px;
background:url("http://www.blogger.com/img/bg-tab-right.gif") no-repeat 0 0;
}
a.ah:hover
{
background:url("http://www.blogger.com/img/bg-tab-right.gif") no-repeat 0 -75px;
}

The -75px highlited in red indicates the height of the images to be skipped, in this case 75px, If we have to display the third image as the hover image then just replace -150px here.

Demo:


For Starters ...

The Styles must be copied to the CSS file or pasted inside a

<style></style>

tags and the HTML can appear anywhere within the body.

Stuck?
Lemme know... Feel free to comment.