In Part 1 of this tutorial, you designed a button sprite that will be coded with HTML, CSS, and JQuery in this part of the tutorial.

Step 1 – HTML

Different people will require a button for different purposes. The remainder of this tutorial will explain a simple scenario where the button functions as a simple download link. Create a link to an imaginary (or real) file for download:

<a href="path/to/download.zip" class="button"></a> 

Step 2 – CSS

Add the following CSS to your HTML document:

    .button {  
        width:570px;  
        height:64px; /* Notice that the height is not the height of the whole sprite, but the height of one single button */  
        display:block;  
        background-image:url(images/downloadbutton.png); /*path to the sprite*/  
        background-position: top; /* the background position (in combination with the height!) makes it possible that only the top of the whole sprite will be visible */  
    }  

When you apply the CSS code above, you will only see the grey button, because it’s positioned on top and the height is 64px

Link hover button

    .button:hover{  
        width:570px;  
        background-position: bottom;  
        height:64px;  
        background-image:url(images/downloadbutton.png) no repeat;  
    }  

When you apply the CSS code above, you will only see the green button when you hover the download button, because it’s positioned at the bottom and the height is 64px

Step 3 – Fading hover effect

This step is not necessary, but it’s an optional step. The transition will be smoothed with JavaScript. We’re going to use the popular jQuery library.

Step 4 – Add code between the head tags

First we need to refer in the head to the .js file that we’ve just downloaded.

    <script type="text/javascript" src="path/to/jquery-1.3.2.min.js"></script>  

After that we can add the following code between the head tags.

    <script type="text/javascript"&gt  
        $(document).ready(function() {  
            // Add the class 'button' just like in CSS with a dot in front of it  
            $('.button').append('<span class="hover"&gt</span&gt').each(function () {  
                var $span = $('&gt span.hover', this).css('opacity', 0);  
                $(this).hover(function () {  
                    $span.stop().fadeTo(500, 1); //Change the number 500 to change the speed of the Fade In  
                }, function () {  
            $span.stop().fadeTo(500, 0); //Change the number 500 to change the speed of the Fade Out  
                });  
            });  
        });  
    </script>  

Step 5 – Edit the CSS

    .button {  
        position:relative;  
        display:block;  
        height: 64px;  
        width: 570px;  
        background:url(images/downloadbutton.png) no-repeat;  
        background-position: top;  
    }  

view plaincopy to clipboardprint?

    .button span.hover { /*notice the different class: span.hover*/  
        position: absolute;  
        display: block;  
        height: 64px;  
        width: 570px;  
        background: url(images/downloadbutton.png) no-repeat;  
        background-position: bottom;  
    }  

The article source:http://www.tutorial9.net/tutorials/web-tutorials/creative-button-animations-with-sprites-and-jquery-part-2/