Sign In  |  Join Now Become a member to add links and start earning points!

Creative Button Animations with Sprites and JQuery (Part 2: CSS, XHTML, JQuery)

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)

142 Comments

  1. Add point Subtract point
    adrian7 (3 Points) February 19, 2011 at 5:31 am

    Hey! Nice work, I will use it to make a download button for my blog, and who knows maybe I will also make a wp plugin with this. Thanks a lot!

    Flag as inappropriate
  2. Add point Subtract point

    Cool, very cool. I’m using on my blog http://www.screenentertainment.net/

    The site is cool. Already in my favorites (:

    Flag as inappropriate
  3. Add point Subtract point
    joeblog (0 Points) December 18, 2010 at 9:20 am

    Can anyone help me with this issue. it been bugging me for days.

    *{
    padding:0;
    margin-top: 10;
    margin-right: auto;
    margin-bottom: 10;
    margin-left: auto;
    }
    body {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
    color: #999;
    background-color: #FFF;
    }
    #content {
    height: 400px;
    width: 1000px;
    margin-right: auto;
    margin-left: auto;
    padding: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    }

    .nav {
    background: url(images/navApple.gif);
    height: 40px;
    width: 876px;
    padding: 0;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;

    }

    .nav li {
    list-style-type: none;
    float: left;
    text-align: center;
    text-decoration: none;
    font-family: Verdana, Geneva, sans-serif;
    margin: 0px;
    padding: 0px;
    }
    /*
    .nav a {
    height: 39px;
    display: block;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 14px;
    text-decoration: none;
    line-height: 35px;
    color: #666;
    text-transform: none;

    }
    .nav a:hover{
    font-family: Verdana, Geneva, sans-serif;
    font-size: 14px;
    color: #FFF;

    }
    */
    .navHome1 {
    float:left;
    display: block;
    width: 112px;
    height: 40px;
    }
    .navHome1 span.hover {
    display: block;
    position: absolute;
    width:112px;
    height:40px;
    background: url(images/navApple.gif) 0 -40px no-repeat;
    }
    .navHome2 {
    float:left;
    display: block;
    width: 120px;
    height: 40px;
    position:relative;}

    .navHome2 span.hover {
    position: absolute;
    width:116px;
    height:40px;
    background: url(images/navApple.gif) -112px -40px no-repeat;
    }

    .navHome3{
    float:left;
    display: block;
    width: 127px;
    height: 40px;
    position:relative;
    }

    .navHome3 span.hover {
    position: absolute;
    width:125px;
    height:40px;
    background: url(images/navApple.gif) -231px -40px no-repeat;
    }
    .navHome4{
    float:left;
    display: block;
    width: 125px;
    height: 40px;
    position:relative;
    }
    .navHome4 span.hover {
    position:absolute;
    width:123px;
    height:39px;
    background: url(images/navApple.gif) -360px -40px no-repeat;
    }
    .navHome5{
    float:left;
    display: block;
    width: 137px;
    height: 40px;
    position:relative;
    }
    .navHome5 span.hover {
    position:absolute;
    width:135px;
    height:39px;
    background: url(images/navApple.gif) -485px -40px no-repeat;
    }
    .navHome6{
    float:left;
    display: block;
    width: 132px;
    height: 40px;
    position:relative;}
    .navHome6 span.hover {
    position:absolute;
    width:130px;
    height:39px;
    background: url(images/navApple.gif) -620px -40px no-repeat;
    }
    .navHome7{
    float:left;
    display: block;
    width: 123px;
    height: 40px;
    position:relative;}
    .navHome7 span.hover {
    position:absolute;
    width:122px;
    height:39px;
    background: url(images/navApple.gif) -753px -40px no-repeat;

    }

    /*
    .nav1 { width: 112px;}
    .nav2 { width: 120px; }
    .nav3 { width: 128px; }
    .nav4 { width: 125px; }
    .nav5 { width: 137px; }
    .nav6 { width: 131px; }
    .nav7 { width: 123px; }
    */
    /*
    .nav1 a:hover {
    background: url(nav.gif) 0 -40px no-repeat;
    }
    .nav2 a:hover {
    background: url(nav.gif) -111px -40px no-repeat;
    }

    .nav3 a:hover {
    background: url(nav.gif) -232px -40px no-repeat;
    }

    .nav4 a:hover {
    background: url(nav.gif) -360px -40px no-repeat;
    }

    .nav5 a:hover {
    background: url(nav.gif) -484px -40px no-repeat;
    }

    .nav6 a:hover {
    background: url(nav.gif) -622px -40px no-repeat;
    }

    .nav7 a:hover {
    background: url(nav.gif) -753px -40px no-repeat;
    }

    it works fine in IE and safari but not in firefox!
    help!

    Flag as inappropriate
  4. Add point Subtract point

    .button:hover{
    background-image:url(images/downloadbutton.png) no repeat;
    }

    // The Above CSS is not correct, the correct CSS is as follow :
    .button:hover{
    background:url(images/downloadbutton.png) no repeat;
    }

    And Also, there is no need to mention the WIDTH, HEIGHT, and BACKGROUND-IMAGE in the HOVER CSS of .button, but only background-position is enough for the effect mentioned here.

    Flag as inappropriate
  5. Add point Subtract point

    Thanks, this effect is verry good.

    But I’m having problems in IE7/IE8 with the hover image using the fadeTo effect. The border of the hover image look back in the transparent area.

    Im searching the solution but i didn’t found it. Any idea to resolve this problem?

    many thanks!

    Flag as inappropriate
  6. Add point Subtract point
    Tạ Tiến Đạt (-1 Points) November 20, 2010 at 8:52 pm

    My computer was reported PSD lost font, can you show me what is that font in PSD files ?

    Flag as inappropriate
  7. Add point Subtract point
    surf shop online (1 Point) November 12, 2010 at 1:49 pm

    Great tips, thank you!

    Flag as inappropriate
  8. Add point Subtract point
    black.friday.boys (0 Points) November 10, 2010 at 9:54 am

    wow, you tutorial is easy to understand

    Flag as inappropriate
  9. Add point Subtract point

    how I can change this code to 3 buttons ???

    Flag as inappropriate
  10. Add point Subtract point
    Website Facility (1 Point) October 20, 2010 at 8:20 am

    Very smart and unique, Thank you for sharing.

    Flag as inappropriate
  11. Add point Subtract point
    اليوتيوب (1 Point) September 28, 2010 at 10:09 am

    this button animation is very creative thanks

    Flag as inappropriate
  12. Add point Subtract point
    46enforce (1 Point) July 28, 2010 at 10:12 am

    Very Nice Tutorial!!! :)

    I’m sorry for my english but i’m french! ^^

    I have a little problem with the javascript effect:
    -when I hover over the button with my mouse, image is erased instantanously and next, the “hover image” appear… I want to have a true transition like in the Demo, but it doesn’t work :/

    Flag as inappropriate
  13. Add point Subtract point
    Padmanabham (2 Points) July 19, 2010 at 1:47 am

    Its great to see both PS and implementation …….. Thanks dude

    Flag as inappropriate
  14. Add point Subtract point
    Matt T (1 Point) June 10, 2010 at 4:48 am

    Awesome tutorial.

    I have applied this to a span, we’ll call it image. This is in larger span called article.

    How can i make the hover effect happen in the image span when i my mouse is over the article span?

    Thanks

    Flag as inappropriate
  15. Add point Subtract point
    Warren Jerzyszek (1 Point) June 8, 2010 at 4:15 am

    Hey great post, I’ve been looking for a tutorial for a while that explains how to do this jquery hover fading technique. This has really inspired me to use it in a couple of my websites as its such a nice transition, I can see it working great with images with a hover state that changes it from a grayscale to colour image.

    Thanks!

    Flag as inappropriate
  16. Add point Subtract point

    Something is not ok with the code for me. I add the hover script and DW says:
    </span&gt').each invalid markup, not correct html format?
    The hell is that?

    Flag as inappropriate
  17. Add point Subtract point
    Paco (1 Point) May 29, 2010 at 5:33 am

    Good wook, I have tried to add to the button “position:absolute”, at this moment the effect has stopped working. Why??

    Flag as inappropriate
  18. Add point Subtract point
    Sumeet Chawla (1 Point) May 23, 2010 at 7:25 am

    Awesome tutorial.. Thanks for the share…

    Flag as inappropriate
  19. Add point Subtract point
    mr47 (1 Point) May 17, 2010 at 4:55 pm

    No. i about the time. it’s very long ….

    Flag as inappropriate
  20. Add point Subtract point
    Seoshneg (1 Point) May 12, 2010 at 6:57 am

    Good work! Thank you for the clear instructions

    Flag as inappropriate
  21. Add point Subtract point
    mr47 (1 Point) May 3, 2010 at 6:32 am

    it’s bad very bad tutorial not professional use of jquery!! why changing the image so long ??? for me this tutorial is stuped …

    Flag as inappropriate
  22. Add point Subtract point
    Web Design (1 Point) April 26, 2010 at 8:15 pm

    great instructions thanks for sharing with us :)

    Flag as inappropriate
  23. Add point Subtract point

    I’m sorry, but when I did everything like it was written in article
    my page could not load. Why it can be so?)

    Flag as inappropriate
  24. Add point Subtract point
    kinozalov (1 Point) April 26, 2010 at 4:10 pm

    Thank you for the clear instructions, good

    Flag as inappropriate
  25. Add point Subtract point
    Vector (1 Point) April 11, 2010 at 3:20 am

    Good work! add to bookmark! Thanks

    Flag as inappropriate
  26. Add point Subtract point
    Stefan (1 Point) April 4, 2010 at 7:35 pm

    The download link for the source files does not work. Can someone provide them to me?

    Thanks

    Flag as inappropriate
  27. Add point Subtract point
    kamajkl (1 Point) March 27, 2010 at 7:07 am

    I think that you can make the same effect of button only with CSS which offer linear gradient too and you don’t need to use an image for it. But for more effects you can use an image, it is better.

    Flag as inappropriate
  28. Add point Subtract point
    โหลดเพลงใหม่ (3 Points) March 19, 2010 at 3:44 am

    very good thank.

    Flag as inappropriate
  29. Add point Subtract point

    Hi, nice tutorial but i have got a problem, with the validation thing….

    document type does not allow element “span” here
    …button,.donatebutton’).append(”).each(function () {

    how can i fix this problem ? On my template i’m not using any span tag how can i fix ?

    Flag as inappropriate
    • Add point Subtract point
      Khalid (2 Points) March 22, 2010 at 6:24 pm

      Put the javascript in a new file and call it script.js (or another name, but keep the extension .js). Now refer to this file between the head tags:
      <script type=”text/javascript” src=”path/to/script.js”></script>

      Now you can delete the javascript on your html page. This part can be deleted:
      <script type=”text/javascript”>
      javascript stuff
      </script>

      Flag as inappropriate
  30. Add point Subtract point

    Thanks! It’s fully tutorial, I like this!!

    Flag as inappropriate
  31. Add point Subtract point
    Thomas Craig Consulting (1 Point) March 16, 2010 at 5:42 am

    Thanks for this resource, great tutorials for a newbie.

    Flag as inappropriate
  32. Add point Subtract point
    download image (1 Point) March 14, 2010 at 9:49 pm

    So Cool …. Thank For This

    Flag as inappropriate
  33. Add point Subtract point
    Scott Webb – Nuwomb (1 Point) March 13, 2010 at 8:36 pm

    Thanks for the tutorial. It’s helped me with understanding jquery a little bit more. slow and steady!

    Flag as inappropriate
  34. Add point Subtract point
    tog000 (1 Point) March 12, 2010 at 12:39 pm

    One could have several buttons by doing this:

    - Remove the background property from the .button
    - Create different rules for each button (will only contain the background property)
    - Set the span:hover background to “inherit”

    This way the jQuery code doesnt have to be modified

    Flag as inappropriate
  35. Add point Subtract point
    zavrab (1 Point) March 7, 2010 at 2:35 pm

    khalid, good tutorial, thanks

    Flag as inappropriate
  36. Add point Subtract point
    Vincent Talbot (1 Point) March 2, 2010 at 9:52 am

    Hi, Nice tutorial.
    But I was wondering if we could use the effect on a input type sumbit =D?

    I tried a lil but it never worked =S

    Vincent-

    Flag as inappropriate
    • Add point Subtract point
      Andrei Gonzales (1 Point) March 14, 2010 at 6:45 pm

      It might be better to run a script that replaces input type=submit with a link, and an onclick triggering the form.

      The reason is because IE doesn’t handle the sprite replacement technique on input type=button or type=submit properly (the value=”text” cannot be text-indented unlike in other browsers).

      Flag as inappropriate
    • Add point Subtract point

      I tried using this on an form input as well and could not get it to work. perhaps an input button does allow the same .hover in css?

      also, has anyone tried adding a .click event that holds the hover state (and fades out other buttons).

      I would love to see that code or tutorial.

      Flag as inappropriate
  37. Add point Subtract point
    Vincent Talbot (1 Point) March 2, 2010 at 9:48 am

    Hi, Nice tutorial but I was wondering if we could use this for a input type submit =D

    I tried a lil but the effect didn’t work =S.

    Flag as inappropriate
  38. Add point Subtract point
    Thomas Craig Consulting (1 Point) March 1, 2010 at 6:40 am

    Great tutorials, thanks for the resource.

    Flag as inappropriate
  39. Add point Subtract point

    All these fools yelling about loss of SEO probably suck at it anyways; I could rank a site high on Google even if it had some fading buttons. And I plan to. Thanks for this tut!

    Flag as inappropriate
  40. Add point Subtract point

    Increible, muy completo y bien explicado, gracias!! Añadido a mi blog!!

    Flag as inappropriate
  41. Add point Subtract point

    it is simply the magic of HTML!

    thank you ;)

    Flag as inappropriate
  42. Add point Subtract point
    Recenzii despre filme si carti (1 Point) February 19, 2010 at 7:51 am

    Hey,

    Thanks, till now i user only the html version and stripes of course (the new thing right?), but for my next project i’ll will shore use the jquery version.

    Regard,

    Flag as inappropriate
  43. Add point Subtract point
    crashfellow (1 Point) February 19, 2010 at 5:16 am

    Great button.

    I found for IE if you set left: 0px; on the two css classes it will fix the issues you’re having as far as the button moving out of position.

    Also as far as text on the link goes, so far i’ve done the following:
    Manually add to your button:

    My button text

    Removing the automatic generation in jQuery (although i would assume theres a work around using jQuery for this)

    Then, this is where i’m stuck as the text disappears behind the effect but is seen on mouse over.
    In your CSS there should be a way, to use z-index to pull the button text above the effect.

    Could you use, something like:

    Button Text

    Then:

    .hover {
    z-index: 10;
    }

    .hover span {
    z-index: 200;
    }

    This in theory should work, but it doesn’t… any ideas?

    I’ve also tried adding position: absolute to the second span, but didn’t do the job.

    I do believe we can get this to work guys!! then there will be no complaints :)

    Flag as inappropriate
  44. Add point Subtract point

    Nice tutorial but if javascript is turned off some of your buttons do not even have a hover state.

    Always have a degrade for that.

    fail

    Flag as inappropriate
    • Add point Subtract point

      I’ve seen many buttons without a hover state, so I’d rather not call it a fail if Javascript is not enabled: the button will be visible and will work. However, here you have a simple solution (made for the second button in the demo, but it can be easily applied on other buttons as well):
      <noscript>
      <style type=”text/css”>
      <!–
      .otherbutton:hover{
      width:570px;
      background-position: bottom;
      height:64px;
      background-image:url(images/downloadbutton.png) no repeat;
      }
      –>
      </style>
      </noscript>

      Flag as inappropriate
  45. Add point Subtract point
    Victor Tiago (1 Point) February 18, 2010 at 10:11 am

    very nice!!!!

    thanks so much…

    Congratulations!

    Flag as inappropriate
  46. Add point Subtract point
    jarret porter (1 Point) February 17, 2010 at 5:53 pm

    You can achieve the same fading hover effects with CSS3, though at the moment I wouldn’t recommend it for now as CSS3 isn’t widely supported.

    Flag as inappropriate
  47. Add point Subtract point
    Patrick Branchaud (1 Point) February 17, 2010 at 2:59 pm

    Will surely use this tutorial in futur

    Flag as inappropriate
  48. Add point Subtract point

    Nice! But for multiple buttons, couldn’t you assign the buttons multiple classes? For example, .button for all the buttons to have the jQuery hover effect, and .b1, .b2, ect. for each one’s styling?

    Flag as inappropriate
  49. Add point Subtract point
    Sahus Pilwal (1 Point) February 17, 2010 at 1:50 pm

    Great example on how to get creative with buttons and jquery! As mentioned above a well written and explained tut. Thanks man ;)

    Flag as inappropriate
  50. Add point Subtract point

    Sorry, but “” isn’t exactly search engine friendly, is it? The link has no value whatsoever; bye bye SEO. And even gets worse; by adding a completely useless span you also require people to add unnecessary markup. I’m sorry but the people yelling “great”, “Awesome” and even “I’m gonna use it on some of my future projects” should stop and think for a minute and consider the consequences.

    Flag as inappropriate
  51. Add point Subtract point
    Michal Kozak (1 Point) February 17, 2010 at 1:44 pm

    Great tut.

    These buttons look just beautiful :).

    Flag as inappropriate
  52. Add point Subtract point

    Thank you. While yeah, jquery has been around for some time, I am new to it, and really appreciate these types of tutorials.

    Flag as inappropriate
  53. Add point Subtract point
    e11world (1 Point) February 17, 2010 at 12:40 pm

    This is why I love detail in tutorials like these. It’s so I don’t have to do any guess work even though this is relatively simple. Great use for this simple script.

    Flag as inappropriate
  54. Add point Subtract point
    David Pohlmeier (1 Point) February 17, 2010 at 9:08 am

    Great tutorial. Easy to use and implement.

    Flag as inappropriate
  55. Add point Subtract point
    Sandstream (1 Point) February 17, 2010 at 4:45 am

    Thanks!

    In the live demo the jQuery-button doesn’t work in Google Chrome :(
    But it works fine in IE8 :-)

    Flag as inappropriate
  56. Add point Subtract point
    idagency (1 Point) February 17, 2010 at 4:16 am

    Great tutorial, I am gonna use it once for sure.

    Flag as inappropriate
  57. Add point Subtract point

    Awesome effect, i love the badge examples

    Flag as inappropriate
  58. Add point Subtract point

    Have to agree w/ Chris above although in a less-hostile form. This tut seems like it should be dated 2005 or something. This is really old news.

    Flag as inappropriate
  59. Add point Subtract point
    The Amazing Spider-Ads (1 Point) February 16, 2010 at 8:26 pm

    Simple and fun. Thank god stuff like this is making Flash more and more obsolete in web design.

    Flag as inappropriate
  60. Add point Subtract point

    It’s simply amazing how simple coding can make a whole lot of difference! I just love all the effects!
    Very helpful post, thank you for posting.

    Flag as inappropriate
  61. Add point Subtract point
    Alex Flueras (1 Point) February 16, 2010 at 3:13 pm

    Sprites are great. It works fine in IE7, there is only a PNG problem at one of the red buttons at the bottom.

    Flag as inappropriate
  62. Add point Subtract point

    COOL! Such a very long time without tuts here. Or I miss it by myself? Lolz.. already subscribe feedburner.

    Flag as inappropriate
  63. Add point Subtract point
    Webdroid (2 Points) February 16, 2010 at 11:05 am

    Sorry, doesn’t seems to work in IE… :(

    Flag as inappropriate
  64. Add point Subtract point
    Milos Milikic (1 Point) February 16, 2010 at 9:57 am

    Great tutorial! I’m gonna use it on some of my future projects.

    Flag as inappropriate