The whole idea it to take advantage of CSS's "hover" and background positioning.

Steps
1. Create the button, duplicate the button and place it above the first one created and darken it or add any other effect you want to add to it as that will be the image that will be show on mouseover.

2. Save the button is a convinient place.

3. Go over and write the html and CSS as shown below.

<style>
#login_button {background:url(login_button.jpg) no-repeat bottom; height:56px; width:144px;display:block;}
#login_button:hover{background:url(login_button.jpg) no-repeat top; height:56px; width:144px;display:block;}
</style>

<a href="#" id="login_button"></a>



A demo of the exact code can be seen here:
http://sawyerrken.net/demo/simple_hover.html

The login button image used is attached.

Another (perhaps better) way to skin the cat:

Rather than import/use 2 images, you could save a few bytes by using a sprite and positioning it appropriately when you hover by using CSS's background-position property

^^^Or rather a coke effect. Personalmente, i prefer it without the sprite jare.

<style>
#login_button {background:url(login_button.jpg) no-repeat bottom; height:56px; width:144px;}
#login_button:hover{background:url(login_button.jpg) no-repeat top;}
</style>

<a href="#" id="login_button"></a>

A short-hand version is this. Should do the same work exactamente.

yawa-ti-de:

Another (perhaps better) way to skin the cat:

Rather than import/use 2 images, you could save a few bytes by using a sprite and positioning it appropriately when you hover by using CSS's background-position property

The example I gave above uses one image, not 2.

I have bolded some part of the code to show the positioning.

I get your point, it is good actually. Nice contribution.

[i]Fanta[/i]stic

My bad. Didn't see the bolded portions initially. Besides, I should have taken a cue from the image that you attached, which is actually one image.

Carry go, he he