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">
$(document).ready(function() {
// Add the class 'button' just like in CSS with a dot in front of it
$('.button').append('<span class="hover"></span>').each(function () {
var $span = $('> 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.
142 Comments
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 inappropriateCool, very cool. I’m using on my blog http://www.screenentertainment.net/
The site is cool. Already in my favorites (:
Flag as inappropriateCan 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!
Flag as inappropriatehelp!
.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 inappropriateAnyway, thanks for this really Effective tutorial…
Flag as inappropriateYes correct, but don’t forget the ‘ – ‘ in no-repeat. I don’t know how I have missed that!
Flag as inappropriateI actually don’t specify the mentioned CSS properties in my stylesheets, but maybe I thought – at the moment I wrote this -that it would be better for the learning aspect. So the readers that have never heard of sprites, would understand it.
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 inappropriateMy computer was reported PSD lost font, can you show me what is that font in PSD files ?
Flag as inappropriateHelvetica Neue Bold
Flag as inappropriateGreat tips, thank you!
Flag as inappropriatewow, you tutorial is easy to understand
Flag as inappropriatehow I can change this code to 3 buttons ???
Flag as inappropriateVery smart and unique, Thank you for sharing.
Flag as inappropriateExcellent tutorial!
Flag as inappropriatelouis vuitton
Flag as inappropriatethis button animation is very creative thanks
Flag as inappropriateVery Nice Tutorial!!! :)
I’m sorry for my english but i’m french! ^^
I have a little problem with the javascript effect:
Flag as inappropriate-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 :/
I advise you to copy the javascript code from the demo. Something went wrong with the code in the tutorial.
Flag as inappropriateIts great to see both PS and implementation …….. Thanks dude
Flag as inappropriateEXCELLENT!
Flag as inappropriateAwesome 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 inappropriateHey 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 inappropriateSomething is not ok with the code for me. I add the hover script and DW says:
Flag as inappropriate</span>').each invalid markup, not correct html format?
The hell is that?
Copy the text/code from the demo. Something went wrong with the code in the tutorial.
Flag as inappropriateGood wook, I have tried to add to the button “position:absolute”, at this moment the effect has stopped working. Why??
Flag as inappropriateAwesome tutorial.. Thanks for the share…
Flag as inappropriateNo. i about the time. it’s very long ….
Flag as inappropriateI don’t think it’s too long, but that is my personal opinion. However, you can change the speed of the transition, as I stated in the tut.
Flag as inappropriateGood work! Thank you for the clear instructions
Flag as inappropriateit’s bad very bad tutorial not professional use of jquery!! why changing the image so long ??? for me this tutorial is stuped …
Flag as inappropriateHi mr47,
I do not understand you. ‘why changing the image so long???’ < If this is your argument I don't understand you, because I haven't changed an image …
Flag as inappropriategreat instructions thanks for sharing with us :)
Flag as inappropriateI’m sorry, but when I did everything like it was written in article
Flag as inappropriatemy page could not load. Why it can be so?)
Maybe it’s the javascript between the head tags. The code in the tutorial has some faults: you’re seeing > instead of >
Flag as inappropriateCopy the code from the demo.
Thank you for the clear instructions, good
Flag as inappropriatevery cool
Thankks
Flag as inappropriateGood work! add to bookmark! Thanks
Flag as inappropriateThe download link for the source files does not work. Can someone provide them to me?
Thanks
Flag as inappropriateI 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 inappropriateYou can do a lot with CSS3, even the fading effect can be created with CSS3. But recreating the whole buttons, especially the green one, without images is not (yet?) possible.
Flag as inappropriatevery good thank.
Flag as inappropriateHi, 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 inappropriatePut 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:
Flag as inappropriate<script type=”text/javascript”>
javascript stuff
</script>
Thanks! It’s fully tutorial, I like this!!
Flag as inappropriateThanks for this resource, great tutorials for a newbie.
Flag as inappropriateSo Cool …. Thank For This
Flag as inappropriateThanks for the tutorial. It’s helped me with understanding jquery a little bit more. slow and steady!
Flag as inappropriateOne 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 inappropriatekhalid, good tutorial, thanks
Flag as inappropriateHi, 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 inappropriateIt 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 inappropriateI 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 inappropriateHi, 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 inappropriateGreat tutorials, thanks for the resource.
Flag as inappropriateAll 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 inappropriateIncreible, muy completo y bien explicado, gracias!! Añadido a mi blog!!
Flag as inappropriateit is simply the magic of HTML!
thank you ;)
Flag as inappropriateHey,
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 inappropriateGreat 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 inappropriateNice 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 inappropriateI’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):
Flag as inappropriate<noscript>
<style type=”text/css”>
<!–
.otherbutton:hover{
width:570px;
background-position: bottom;
height:64px;
background-image:url(images/downloadbutton.png) no repeat;
}
–>
</style>
</noscript>
very nice!!!!
thanks so much…
Congratulations!
Flag as inappropriateYou 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 inappropriateThat’s why they say that CSS is the new JavaScript (and JavaScript is the new flash). However, there’s one big issue called IE. Even version 8 doesn’t support CSS3.
Flag as inappropriateWill surely use this tutorial in futur
Flag as inappropriateNice! 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 inappropriateI haven’t thought about it while writing the tut, but yes, using multiple classes like class=”button b1″ should be possible. Thanks for the tip/reminder.
Flag as inappropriate(I hope that this is not a double post … I’ve already replied but it didn’t show up)
Great example on how to get creative with buttons and jquery! As mentioned above a well written and explained tut. Thanks man ;)
Flag as inappropriateSorry, 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 inappropriateHmmm, the site screwed up the html. It should’ve read:
Flag as inappropriate“Sorry, but “[a href="/foo"][/a]” isn’t exactly search engine friendly…” etc.
Who’s yelling? :D
Not everyone is a subscriber to SEO ;) If that worries you, it is definitely possible to do something like this:
<a href=”foo” class=”button” ><span>Link Text</span></a>
and then define a style like:
Flag as inappropriatea.button span {
display:none;
}
And if you’d like to show code, you can do so using HTML codes for special characters:
ie:
Flag as inappropriate< = <
> = >
It’s not (just) about SEO; it’s about semantics and accessibility also. Ofcourse you can put the text in as you demonstrate; but how come this tutorial doesn’t mention that? You’re surely aware about the numbers of people reading this. Are you also aware of how many people just will copy/paste this into their projects? I would suggest adding this information to the article or even better: change the demo code so that this ‘problem’ is avoided.
Oh, and about the HTML tags; I figured that already <LOL> :-) Just didn’t want to pollute this blog :-)
Flag as inappropriateYou said it correct: ‘problem’. Wrapped in quotes, because it’s not a problem. You’ll have a whole page with text that is relevant for SEO, but you’re complaining about a call-to-action button. =D
Flag as inappropriateI also said: “It’s not (just) about SEO; it’s about semantics and accessibility also.”
Flag as inappropriate”
Are you also aware of how many people just will copy/paste this into their projects?
”
Honestly, if some do actually copy/paste this content for their projects, so be it; but I suppose that those projectrs are personal ones done by amaters.
Flag as inappropriateIndeed, I would not imagine any web professional copying/pasting the raw material found in this article. Not because of the content, but because of it’s nature : this is a “tutorial”, and therefore aims to teach by example not to provide a working solution.
David your comment:
“Who’s yelling? :D
Not everyone is a subscriber to SEO ;) If that worries you, it is definitely possible to do something like this:
Link Text
and then define a style like:
a.button span {
display:none;
}”
Display none will screw up screen readers, this is NOT web accessible. Look up section 503 and WCAG.
Flag as inappropriateGreat tut.
These buttons look just beautiful :).
Flag as inappropriateThank you. While yeah, jquery has been around for some time, I am new to it, and really appreciate these types of tutorials.
Flag as inappropriateThis 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 inappropriateGreat tutorial. Easy to use and implement.
Flag as inappropriateThanks!
In the live demo the jQuery-button doesn’t work in Google Chrome :(
Flag as inappropriateBut it works fine in IE8 :-)
Great tutorial, I am gonna use it once for sure.
Flag as inappropriateAwesome effect, i love the badge examples
Flag as inappropriateHave 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 inappropriateSorry this one wasn’t for you. Some of our posts aren’t for everyone! We have a fresh bunch joining our ranks every month and overall I feel we balance ourselves fairly well.
Maybe tomorrow’s post will be better for ya!
Flag as inappropriateSimple and fun. Thank god stuff like this is making Flash more and more obsolete in web design.
Flag as inappropriateIt’s simply amazing how simple coding can make a whole lot of difference! I just love all the effects!
Flag as inappropriateVery helpful post, thank you for posting.
perfekt! great article
Flag as inappropriateVery nice. Thank you.
Flag as inappropriateSprites are great. It works fine in IE7, there is only a PNG problem at one of the red buttons at the bottom.
Flag as inappropriateCOOL! Such a very long time without tuts here. Or I miss it by myself? Lolz.. already subscribe feedburner.
Flag as inappropriateSorry, doesn’t seems to work in IE… :(
Flag as inappropriateAt the moment I do not have IE to test, but Alex (see below) says that it works (and it should). However, I had once an issue with the jQuery-button in IE and I solved it by replacing the png image with a jpg image.
Flag as inappropriateGreat tutorial! I’m gonna use it on some of my future projects.
Flag as inappropriate