CSS create a mouse sensor to change the picture button

This CSS tutorial will teach you how to use CSS to create a beautiful dynamic button, called dynamic, refers to the default state and focus state when the background button picture is different.
This CSS tutorial will teach you how to use CSS to create a beautiful dynamic button, the so-called dynamic, refers to the default state and focus state when the background button picture is not the same, let's see how this is done:

Sliding Door
Because we want our buttons to be flexible, we're going to make a background image that can automatically change the size of the text. For this, we use the beloved sliding door technique; The illusion created by two complementary images, a default, one click.
Our button will be a basic label nesting <a> and <span>, and then give each different layer a different background image. Here is the HTML code:
<a href= "#" class= "button" ><span>bring World peace</span></a>
Next, we need two clear background images, which are used under the default and focus states respectively:

We're going to use these two pictures to get the buttons to change under the CSS without using any javascript. The background image should be set to a reasonable height and width. Here, for example, we set the width to 300px and the height to 24px.
Below is a background picture of the and.
SPAN

A
"  

Style button  
Finally, we need a CSS to style the buttons so that all of them are linked together. Because we want to add the span and a elements to the floating property in this process, we have a clear float for the entire style:. * * Generic container (i.e. div) for floating buttons/overflow : Hidden; width:100%;} A.button {background:transparent url (' bg_button_a.gif ') no-repeat scroll top right; color: #444; display:block; float: Left Font:normal 12px Arial, Sans-serif; height:24px; margin-right:6px; padding-right:18px; /* Sliding Doors padding * * text-decoration:none; } A.button span {background:transparent url (' bg_button_span.gif ') no-repeat; display:block; line-height:14px; padding: 5px 0 5px 18px; }&NBSP
We now have a beautiful button, but he has not yet reached the desired conversion effect when focusing, so we also need to add: a.button:active {background-position:bottom right; : #000; outline:none; /* Hide dotted outline in Firefox */} a.button:active span {background-position:bottom left; padding:6px 0 4px 18px; * Push Text down 1px * *}&NBSP;
OK, it's done. However, it should be noted that the above method can not operate normally under IE browser, so, to make him work on IE, you need to use in a label:  
<a href= "#" Onclick= "This.blur ();" class= "button" > ... </a>