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.

If you do not want to complete part one of this tutorial, you can download the source files created in that lesson here.

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:

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

Demo: View Live Demo

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.

The original tutorial comes from this website. I’ll do my best to explain.

Step 4 – Add code between the head tags

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

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