Question : CSS mouseover and click effects

Hi,

Please have a look at http://www.elance.com/

You will see that their "Get Started" button has 2 effects - when you mouseover it lights up and when you click it depresses down. I'm presuming this is acheived through the use of different images but how do I have this on my own website using css and minimal js?

Would like it for <a> tags as well as input buttons

Thanks

Answer : CSS mouseover and click effects

Hi hubfub,
This shouldn't require JS at all, it's called CSS sprites.
The button actually has a single background image that combines the three cases, you can see the image here http://www.elance.com/media/images/4.0/buttons/get-started-btn-large-special-spr.png .

With a simple CSS that handles a:link, a:hover and a:active you can achieve the same effect.

Try the example below, i've used the same image to illustrate, it should be simple, but just requires accurate image positioning.

Cheers

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Button Sprites Test</title>
<style type="text/css">
    a.getstarted:link, a.getstarted:visited {display:block;width:183px;height:42px;text-indent:-9999px;background:url(http://www.elance.com/media/images/4.0/buttons/get-started-btn-large-special-spr.png) no-repeat left top;}
    a.getstarted:hover {background:url(http://www.elance.com/media/images/4.0/buttons/get-started-btn-large-special-spr.png) no-repeat left -42px;}
    a.getstarted:active {background:url(http://www.elance.com/media/images/4.0/buttons/get-started-btn-large-special-spr.png) no-repeat left -84px;}
</style>
</head>

<body>
    <div>
        <a href="#" class="getstarted">Get Started</a>
    </div>
</body>
</html>