Saturday, June 9, 2007

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.

4 comments:

Mike said...

FYI- your CSS code is getting chopped off (FireFox 2).

I like this technique because you're not hunting for files if you need to update something, and once the image is loaded, all states are loaded too so you don't need to wait for the mouse over.

Arun Prabhakar said...

Am using firefox 2.0.0.4 !
There is absolutely no problem...

Chris said...

I'm using Firefox 2.0.0.4 and there is a total problem. I can't read the code because it's getting chopped off.

I do sort of get what's going on with the code but since I'm at the edge of my knowledge of css here I'm not sure I can fill in the blanks. I hope it can be fixed.

Kristina Sherk said...

Ok,
Heres a question for you...
I am a retoucher who has started a blog about headshots and retouching for a mainstream client without going overboard. So I am trying to add some of my retouching images by adding an image and having a roll over effect on the image (from unfnnished to retouched). Here is the HTML that I used, Ive tried a lot, but I am by NO MEANS an HTML wizard!
Thanks for your help!

a.ah
{
display:block;
width:382px;
height:75px;
background:url("http://photos-h.ak.facebook.com/photos-ak-sf2p/v252/201/6/18200164/n18200164_33028415_3156.jpg") no-repeat 0 0;
}
a.ah:hover
{
background:url("http://photos-g.ak.facebook.com/photos-ak-sf2p/v252/201/6/18200164/n18200164_33028414_2928.jpg") no-repeat 0 -75px;
}