Hey T9 Fans, Don't forget to Share!

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:

<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

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.

<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>

How to deal with several buttons on one page

If you have several buttons on one page and you’d like to add the fading hover effect, you can give it a different class in the HTML and add this in the JavaScript above after the word .button and you need also to separate the words with a comma. (Example: ‘.button,.buttonTwo’)

Step 5 – Edit the CSS

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

.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;
}

View Live Demo to check the result.

Download the source files (PSD included)

Download

Related Topics: , , ,