Create an Animated “Call to Action” Button

Dec 7 2009 by Jacob Gube | 51 Comments

How to Create an Animated Call to Action Button

In this web design and development tutorial, you’ll get a walkthrough for creating a "Call to Action" button sprite in Photoshop as well as how to use jQuery to animate it. This tutorial is broken up into three sections: Photoshop, HTML/CSS, and JavaScript.

Introduction

This tutorial is divided into three sections:

  • Section 1: Photoshop
  • Section 2: HTML/CSS
  • Section 3: JavaScript (jQuery)

If you enjoyed the tutorial, please express your appreciation by including images/screen shots of your work in the Six Revisions Flickr group – we’re trying to build up the collection there so that we can all have a nice community showcase.

Final Result

Final ResultClick to see live demo.

Demos

Section 1: Photoshop

The first section will deal with the graphic creation of the Call to Action button.

Set up the Photoshop document

1 Our button’s dimensions will be 200px x 50px, but since we’ll be creating a CSS background sprite for the two different states, we’ll make the height of the canvas 100px. To begin, create a new Photoshop document (Ctrl + N) that has a canvas width of 200px and a canvas height of 100px.

Set up the Photoshop document

2 To make drawing the button easier, we’ll set up some guides. If it isn’t turned on yet, turn on your rulers first (Ctrl + R to toggle it on and off) by going to View > Rulers and making sure that it’s checked. To create a guide, simply click on a ruler on the edge of the Photoshop workspace and drag towards your canvas. We’ll make 5 guides: 4 at the edges of the canvas, and 1 horizontal guide at the 50px mark (which effectively divides our canvas into two equal parts).

Set up the Photoshop document

Creating the button shape

3 Now we’ll create a rounded rectangle shape. Get the Rounded Rectangle Tool from the Tools Panel. Adjust the Radius option in the Options bar to 8px. The foreground color doesn’t matter because it will be overridden by the layer styles that we’ll soon apply.

Creating the button shape

4 With the Rounded Rectangle Tool ready to go, created the rounded rectangle shape at the top half of the canvas by dragging from the top left corner to the bottom right corner of the 50px mark.

Creating the button shape

Adding layer styles to the button

5 We’ll now add a series of layer styles to the rounded rectangle shape that we just created. To start, double-click on the shape layer in the Layers Panel to open the Layer Styles dialog box.

Adding layer styles to the button

6 First we’ll add a gradient overlay. Click on the Gradient Overlay to apply the layer style. Then click on the Gradient option to open the Gradient Editor dialog box to choose the colors we want.

Adding layer styles to the button

7 In the Gradient Editor, change the left color stop’s color by clicking on it (this will be the color at the bottom of the button). I’ve decided to use a dark olive green color for the left color stop (#85928a). Change the right color stop to a lighter green color (#d3e1d8) – this will be the color of the button at the top. Then slide the Color Midpoint to 40% so that the light green is slightly more dominant.

Adding layer styles to the button

Adding layer styles to the button

8 Add an Inner Glow layer style next, this will give the button a subtle white border. Set the Opacity option to 100% and change the color of the glow to white (#ffffff) by clicking on the small box to open the color picker and then changing it there. Then under the Elements option set, change the Size option to 3px.

Adding layer styles to the button

Adding layer styles to the button

9 The final layer style we’ll add to the normal state button is a 1px dark green (#74857a) stroke to add a narrow border around the shape. Set the Size option to 1px. Set the Position option to Inner so that it draws the border inside the button shape. Finally, change the color of the stroke by clicking on the Color option to open the Color Picker dialog box and entering a dark green color (#74857a).

Adding layer styles to the button

Adding layer styles to the button

Typing in the text

10 For the text of our button, we’ll use a simple and familiar font family: Arial. You can use any font that you wish, but typically, the text effect we’ll be applying is best suited for bold and sans serif fonts – keep that in mind when selecting the font family. Grab the Horizontal Type Tool (T) from the Tools Panel. In the Options bar, set the font family to Arial, the font style to Bold, font size to 24px, and anti-aliasing method to Sharp. Don’t worry about the font color since it will be overridden by the layer styles we’ll be applying later.

Typing in the text

11 Click anywhere in the canvas to start typing, and type your call to action; the call to action used here is "Sign Up" but yours might be "Buy Now" or "See Demo", it’s up to you.

Typing in the text

Centering the text

12 Depending on where you started typing, your text may not be centered in the button, so we need to center it precisely. First, create a marquee selection around the button by Ctrl + clicking on the button shape layer’s thumbnail in the Layers Panel; this will automatically create a marquee selection around the edge of the button.

Centering the text

13 Now click on the text layer in the Layers Panel to make it the active layer (don’t deselect the selection yet). Then go to Layer > Align Layers to Selection > Vertically Center to position the text layer vertically centered on our button.

Centering the text

Centering the text

14 With the marquee selection still around the button and the text layer still the active layer in the Layers Panel, go to Layer > Align Layers to Selection > Horizontally Center to locate the text in the middle of the button.

Centering the text

Applying Layer Styles to the text

15 Double-click on the text layer to open up the Layer Styles dialog box. We’re going to create an inset text effect similar to the How to Create Inset Typography in Photoshop tutorial I wrote a while back.

Centering the text

16 Apply a gradient overlay by checking the checkbox beside it. click on the Gradient option to open the Gradient Editor. For the left color stop, choose a dark olive green color (#425047). For the right color stop, choose a slightly lighter green color (#94ad9d).

Centering the text

Centering the text

17 Next, apply an inner shadow layer style. Set the Angle option to 90 degrees, Distance to 1px, and Size to 2px. Keep the inner shadow color to black (#000000) and the Opacity option to 75%. This will create a subtle inset/stamped-in effect.

Centering the text

Centering the text

18 To finish off the text layer styles for the normal state, we’ll add a subtle drop shadow at the bottom of the text. Change the Blend Mode option to Normal and the color of the shadow to a light green color (#d1dfd7). Set the Opacity to 100%. Make sure that the Angle option is also at 90 degrees to keep it the same as the inner shadow’s light source. Finally, set the Distance option to 1px and the Size option to 2px (equal to the inner shadow’s settings).

Centering the text

Centering the text

Creating the hover state button group

19 The hover state will fill up the bottom of our canvas. We’ll just duplicate the normal state button, move it down the lower part of the canvas, and tweak the layer styles to make a slightly different look. To keep things organized, we’ll group together the normal state button layers. To create a group, click on the Create a new group icon at the bottom of the Layers Panel (it looks like a folder).

Creating the hover state button group

20 Change the group’s name to something more intuitive than the default Group 1, such as Normal. Then drag the two normal state layers in the newly created group.

Creating the hover state button group

Creating the hover state button group

21 If you’ve turned off the guides that we created earlier, turn it back on to help us position the hover state button accurately; the shortcut is holding down Ctrl (or Cmd) and then pressing ; (alternatively, go to View > Show > Guides).

Creating the hover state button group

22 Duplicate the Normal group by choosing the group in the layers panel. Name the group to something that makes sense like Hover.

Creating the hover state button group

Creating the hover state button group

Creating the hover state button group

23 With the Hover group active in the Layers Panel, click on the Move Tool (V) in the Tools Panel and use your down arrow key to move the Hover group to the bottom of the canvas so that the top edge of the button is right on the middle guide. Use the Zoom Tool (Z) in the Tools Panel to help you position the Hover group if you’re having a hard time seeing the edges. If you use the Zoom Tool (Z), just press Ctrl/Cmd + 1 to go back to 100% view.

Changing the layer styles of the Hover group

Changing the layer styles of the Hover group

Changing the layer styles of the Hover group

24 Since we just need to tweak a few settings, creating the hover group button will be quicker. Inside the Hover group, double-click on the button shape layer in the Layers Panel to open the Layer Styles dialog box. We will keep everything the same except the gradient overlay layer style colors. Edit the settings so that the left color stop of the gradient is a dark green color (#515753) and the right color stop is a slightly lighter green color (but still dark – #7d837f).

Changing the layer styles of the Hover group

Changing the layer styles of the Hover group

25 Next, double-click on the text layer in the Hover group to open up its Layer Styles dialog box. Change the Drop shadow color to a darker color (#7a807c).

Changing the layer styles of the Hover group

Changing the layer styles of the Hover group

26 Finally, edit the gradient overlay layer style colors. Set the left color stop to a dark green color (#5d615e) and the right color stop to a slightly lighter green, but still dark, color (#606462).

Changing the layer styles of the Hover group

Section 1: Photoshop done

Section 1: Photoshop done

We’re now done with the Photoshop portion of this tutorial (Section 1). If you followed along, you should now have something like this:

Section 1: Photoshop done

This will be our CSS background sprite. Don’t close the Photoshop document yet, since we still have to save it for the web in Section 2.

Section 2: HTML/CSS

Now, we’ll make our Call to Action button functional using HTML/CSS.

1 Start by creating a folder that’s designated as our working directory. I called this directory "Call to Action Button" but feel free to name it something else. We’ll save all of our assets in this folder.

Section 2: HTML/CSS

Section 2: HTML/CSS

2 FWe’ll save our CSS background sprite (the button we created in Section 1). Go back to Photoshop, choose File > Save for Web & Devices. Save it in JPG file format (PNG or GIF works too) inside the Call to Action Button folder as call_to_action_sprite.jpg.

Section 2: HTML/CSS

Section 2: HTML/CSS

3 Next, we’ll create the HTML document – the best way to do this is with your favorite source code editor (I use Dreamweaver), but a simple text editor will suffice. Create a standard HTML document, and save it inside the Call to Action Button folder as index.html.

Section 2: HTML/CSS

Section 2: HTML/CSS

4 For the HTML, we’ll use a hyperlink element <a> nested inside a paragraph element (<p>) with a class of cta-button. Here is the code to place inside the <body> of index.html. For web accessibility, we type out the text in our call to action button, which is "Sign Up".

Code block 1:

<body>
  <p class="cta-button"><a href="#">Sign Up</a></p>
</body>

Code block 1View of p.cta-button a element in Google Chrome.

5 Now we need to style it, so create a stylesheet called styles.css and save it in the Call to Action Button folder.

Finished.

6 In index.html, link to your stylesheet.

Code block 2:

<head>
  <link rel="stylesheet" href="styles.css" type="text/css" media="screen"  />
</head>

7 We need to display the p.cta-button element as a block element so that we can give it a set height and width equal to our call to action button (width:200px, height:50px). We also set it so that its background is the bottom part of our CSS sprite (the hover state). Later on, we’ll reveal it by moving the background of the <a> element by styling the a:hover pseudo-selector. To center the button on the browser viewport, we use the margin:0 auto technique, which works for most browsers including IE5.5 and above.

Code block 3:

.cta-button {
  display:block;
  width:200px;
  height:50px;
  background:url(call_to_action_sprite.jpg) no-repeat 0 -50px;
  margin:0 auto;
}

Code block 3View of Call to Action button with background sprite set.

8 Next we’ll style the <a> element inside the p.cta-button paragraph. We also need it to be a block element so that we can use the text-indent CSS background image replacement technique to move the HTML text ("Sign Up") outside of the browser’s viewport; we do this by setting an extreme value of -9999px to its text-indent attribute. With set the width and height to 100% so that it’s equal to the width and height of p.cta-button. Finally, we position the background sprite to the top left of the image sprite, which is the normal state.

Code block 4:

.cta-button a {
  display:block;
  width:100%;
  height:100%;
  background:url(call_to_action_sprite.jpg) no-repeat 0 0;
  text-indent:-9999px;
}

Code block 3View of Call to Action button with CSS finalized. Sign Up HTML text is indented out of the viewport.

9 At this point, we want to reveal the hover state when the user mouses over the button, so we’ll use the :hover psuedo-selector to hide the background.

Code block 5:

.cta-button a:hover {
  background-position:0 50px;
}

Section 2: HTML/CSS finished

All together, here’s our HTML and CSS.

Code block 6:

<body>
  <p class="cta-button"><a href="#">Sign Up</a></p>
</body>

Code block 7:

.cta-button {
  display:block;
  width:200px;
  height:50px;
  background:url(call_to_action_sprite.jpg) no-repeat 0 -50px;
  margin:0 auto;
}
.cta-button a {
  display:block;
  width:100%;
  height:100%;
  background:url(call_to_action_sprite.jpg) no-repeat 0 0;
  text-indent:-9999px;
}
.cta-button a:hover {
  background-position:0 50px;
}

Demo of HTML/CSS

Example 1: Call to Action button with HTML/CSS.

Section 3: JavaScript/jQuery

Let’s animate our button, shall we?

1 First, download the jQuery library and save it in the Call to Action button folder. If you’re interested in studying the library, download the uncompressed version, but if you’re going into production, download the minified (smaller file size) version.

new file

2 In the <head> of index.html, right below the link reference to styles.css, reference the jQuery JavaScript library.

Code block 8:

<link rel="stylesheet" href="styles.css" type="text/css" media="screen" />
  <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
</head>

3 Create a blank JavaScript file and save it as cta-javascript.js inside the Call to Action button folder.

cta-js file

4 Reference cta-javascript.js in index.html, right below the jquery library reference.

Code block 9:

<link rel="stylesheet" href="styles.css" type="text/css" media="screen" />
  <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
  <script type="text/javascript" src="cta-javascript.js"></script>
</head>

5 Switch over to cta-javascript.js, then we’ll start coding. First, let’s set up the .ready() method which is a jQuery method that allows us to run our code as soon as the DOM is ready to be worked on.

Code block 10:

$(document).ready(function(){
  ...our code goes in here...
});

6 The first thing we need to do is to remove the :hover style because it will affect the animation effect. Doing it this way (via JavaScript) ensures that our button degrades nicely – even with JavaScript disabled, there will still be a hover effect. We can use the .css() method to remove the style.

Code block 11:

$('p.cta-button a')
  .css({
    'backgroundPosition':'0 0'
})

7 Next, we chain the .hover() method, which is an event helper that deals with the mouseover event to the $() element selection. The hover method can take in two functions: the first function executes code for the mouseover event, and the second function executes code for the mouseout event (when the user removes the mouse pointer out of the element).

Code block 12:

$('p.cta-button a')
  .css({
    'backgroundPosition': '0 0'
  })
  .hover(
    function(){
      ...code to execute on mouseover...
    },
    function(){
      ...code to execute on mouseout...
    }
)

8 The code we want to execute on mouseover and mouseout is the .animate() method, which smoothly transitions CSS properties from the current value to the desired value. In this case, we want to transition the opacity to 0 when on mouseover (to reveal the hover state), and 1 when the mouse leaves the  p.cta-button a element. The .animate() method also takes an integer as a parameter that dictates how fast the effect transisition should occur, in millisecond units. I found that 650ms was a good speed, but feel free to experiment here. And on a final note, we use the stop() JavaScript method on the element we’re transitioning so that if the user mouses in and out quickly before a transition is finished, it stops it before executing the new animation event.

Code block 13:

.hover(
  function(){
    $(this)
      .stop()
      .animate({
        'opacity': 0
 	  }, 650);
  },
  function(){
  $(this)
    .stop()
    .animate({
      'opacity': 1
 	}, 650);
  }
);

Section 3: JavaScript (jQuery) done!

We’re now done with the entire tutorial. Here’s the JavaScript in one go:

Code block 14:

$(document).ready(function(){
  $('p.cta-button a')
    .css({  'backgroundPosition': '0 0' })
    .hover(
      function(){
        $(this)
          .stop()
          .animate({
            'opacity': 0
          }, 650);
      },
      function(){
        $(this)
          .stop()
          .animate({
            'opacity': 1
          }, 650);
      }
    );
});

JavaScript demo

Example 2: Call to Action button with jQuery animation.

Download the source files

Questions or comments?

Were you able to complete the tutorial? How was the difficultly? Did you get stuck in any way? Please pose your questions and provide us with your feedback on how we can make tutorials on Six Revisions better.

Related Content

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and PHP development. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

51 Comments

Ionut

December 8th, 2009

Thanks for this tutorial, Jacob. It’s very helpful and well explained.

CyberFox

December 8th, 2009

Nice tutorial, Thanks.

Dan P

December 8th, 2009

I hate to say it, because I love everything else on here,

but that button is fairly unattractive. The hover state may even be ugly. Just my personal taste.

The animation is great, useful, and I’m grateful. How you achieved this is probably the better point of this article, since you don’t want identical looking buttons everywhere.

One other thing: no click state? I’ve noticed this a few places. I’m a big fan of the three classic states. Normal, Hover (lighter, extra shine, raised), and Pressed/Active (darker, depressed, inset) sort of how the hover state here looks.

Jeremy Gode

December 8th, 2009

Very thorough article. Nice work.

iPad

December 8th, 2009

DUDE! So easy to follow, thanks :)

Design Informer

December 8th, 2009

Very nice effect Jacob. More tutorials like these please. Also, one question. How fast will the page load if it had a lot of these buttons?

Uncleserb

December 8th, 2009

Cheers for this tut! Great one, very useful as I need to get my hands on CSS sprites!

;)

MuriImWeb

December 8th, 2009

Really nice in-depth explaination, thanks :)

Kalle

December 8th, 2009

Good one Jacob, all tough there is a small glitch in it. The Firefox default link highlight border go from center where the button is all the way to the left edge of the screen when the button is clicked.

Steward

December 8th, 2009

Hi. Look at this: http://clip2net.com/clip/m11645/1260267943-clip-8kb.png

I recommand add to
Code block 7:

.cta-button {
display:block;
width:200px;
height:50px;
background:url(call_to_action_sprite.jpg) no-repeat 0 -50px;
margin:0 auto;
overflow: hidden; //!!!!! this code
}

Jacob Gube

December 8th, 2009

@Dan P: Thanks for the feedback. Looking at it now, I’m not too happy with the hover state either, too dark, or just something about it that doesn’t mesh with the normal state. I wished I spent more time with picking the colors. The three states you suggested would be an awesome tutorial in itself, the button states are semantic (e.g. when clicked the button is depressed). Thanks for “saying it” and I thank you for sharing your constructive critique, it only helps make Six Revisions better.

@Design Informer: It wouldn’t affect page load too much, and if you are using jQuery already, then you wouldn’t notice them at all.

@Kalle: Here’s the web developer’s defense: “It’s not a bug, it’s a feature” spiel! :) Seriously though, that’s for web accessibility for people who have to use tab to get to interactive page elements. You can remove it by adding the following block of code:

.cta-button a:focus {
  outline: none;
}

@Steward: Ah, good solution! I’ll add that to code block 7.

Doug Barned

December 8th, 2009

Great, thanks! This has been bookmarked :D

/Doug

Dario Pintaric

December 8th, 2009

I think you should rather have used the z-index for backround image and span to get the image over the text. That way if the image is not loaded or someone has images disabled (like i do on my cell phone) they can see the “Sign up” link. This method also passes validation markup but is way better imho.

adam

December 9th, 2009

good tut…..but. no criticism at all but we could create the boxes with css, eliminating the need for sprites and wasting time in PS. could use transition for the effect. no jquery and about 5 minutes work. however, while the boxes would be fine in both webkit and mozilla, the transition works only in webkit. i ignore IE. i did this on my site, also using rgba, rotate and scale….looks great in webkit…….looks fine in mozilla.

Jacob Gube

December 9th, 2009

@Dario Pintaric: Good point with regards to the text-indent CSS background image replacement disadvantage; when browsing with images off/CSS on, you won’t be seeing anything. Here’s a good explanation of the technique that Dario’s talking about, if anyone’s interested: CSS Image Replacement

@adam: Most, if not all, professional working designers/developers need to support all (major) browsers. We can’t tell the client that we don’t care about the web browser with the most market share. It sucks, I know, but that’s a part of the job. Plus, this tutorial may have taken a long time to write, but total construction of the button, HTML/CSS, jQuery would take someone like myself, who already knows jQuery/HTML/CSS/Photoshop 15-20 minutes. And the effect, in my opinion, is smoother and feels more responsive than doing it with the new CSS3 properties, and without the limitation of only having it work in Google Chrome and Safari 4 (the technique above will probably work in IE6, even – haven’t really tested it though). My two cents – thanks for sharing your thoughts!

Mark Carter

December 9th, 2009

I hate to say it .. but ‘why’??? Not sure that this sort of thing isn’t overkill .. when CSS can give the user feedback on its own. Not sure this focus on jQuery is always for the best … just my 2 cents worth.

Rhyno

December 9th, 2009

@Mark Carter – I have to say I agree wtih you that this could be overkill.

The fade seems smooth and sophisticated – but might the subtlety actually be counter to the purpose of a different button states? If a visitor is gliding their mouse around (as many do out of habit) and briefly flicks over the button, they may not even realize it is a button as the effect is too slow. Using just CSS, the instant transition almost makes the button scream at the user, “NO SERIOUSLY, CLICK ME!” Has anyone tried a test to see how these types of buttons affect conversion rate?

Also, as a side note on accessibility – CSS seems like it would be more accessible if someone might have an issue with contrast and not notice the gradual change of the jquery operation.

Jon Crim

December 9th, 2009

Great tutorial, thanks for taking the time to put it together – definitely bookmarked!

adam

December 10th, 2009

jacob….i actually agree with u, which is why i use jquery but, u know, eventually……..maybe….hopefully! on ie i have given up and am using the universalie stylesheet….not wonderful but validates, and works.

Deepu Balan

December 10th, 2009

Great tutorial… thanks

Webjohn01

December 10th, 2009

Hello Jacob!

What a nice tutorial and design, I really love it very much.

Keep up the good work.

More thanks!

Savannah W

December 10th, 2009

The fade is nice… but I feel that I would be more “called to action” if the button faded from dark to light, or had its edges highlighted.

The PS tutorial, CSS, and JS are nice, but don’t overlook the usability aspect of web design! No matter how spiffy your fades and drop-shadows are… they’re useless when your visitor can’t relate to them!

Rob

December 13th, 2009

Hi,

Very nice article. It covered a lot more than I thought from reading the article title. A few observations how it could be improved (I haven’t read all the comments so apologies if this has already been covered).

You should really speed up the fade efefct as the slow fade actually doesn’t make the button stand out imo. I can see why you’ve used a slow animation to show the subtle effect, but a faster fade would definately help.

The text replacement technique you used doesn’t aide accessibility to people browsing with images turned off as the text will be off screen. YOu could have used some of the image replacement technqiues such as adouble span and positioning your image.

My personal preference, is the image without any JQuery at all – as the effect is instant.

Thanks

Future Webs

December 14th, 2009

Great tutorial, very useful. I have also bookmarked;)

Monsieur M

December 18th, 2009

Thank you very much for this tutorial.

This was my first attempt with jquery and it looks great !

Thanks a lot !

Ben Stokes

December 30th, 2009

Thanks for the easy to follow tutorial – nice work

paul

January 11th, 2010

thanks for the tutorial, I just don’t understand why you need to apply the sprite to the p tag and the a tag. You oculd just set it to the a tag background, that ‘s how I would do it, but maybe I’m missing something?

thanks for the image replacement technique, I was looking for something that would be better than the text-indent!

Ben Stokes

January 17th, 2010

Jacob,

Thank you for the tutorial, you have explaind it so well. This will help out a tremendous lot, CSS is great.

noah

February 4th, 2010

Hi Jacob, thanks for the tutorial, is there anything I need to do differently to make this work in word press? I can get the CSS to work and link up properly but I can’t seem to get the jqueary to link up or work, not sure which?
thanks

Anand

February 20th, 2010

Lol I never seen such a nice article describing all the three sections at once !! thanks alot jacob

Optimiztik

February 20th, 2010

Thanks jacob !! will i get a similar kinda post for the register me icon for my event form !!

Jeannie

February 28th, 2010

This is my first post but I have read over several very helpful articles you have written and I wanted to say how great you are at explaining things. Thanks so much for all your hard work because you a unique way of sharing info that help the non-technical mind. It gives us an open door into your world. You invite us in and don’t leave us out. You are a true blessing.

Virus Medic

March 28th, 2010

Nice tutorial – we are going to follow this on Monday for a lunch time activity.

Elrosi

May 2nd, 2010

Perfect tutorial… thanks

Sweety

May 26th, 2010

Awesome…….good for photoshop beginner :)

Agon

June 3rd, 2010

Thanks for sharing it…nice trick going to learn more about jquery…like the finished effect…keep it up Jacob…more tuts like this…

sidman26

June 5th, 2010

thanks jacob helped me alot!

rebwar

June 19th, 2010

nice work,
thanks a lot

Kishore Mylavarapu

July 3rd, 2010

Great effect..thanks for the effort.

rickzwebz

July 22nd, 2010

This is one of the nicest and easiest tutorials on this subject I’ve found. Very easy to modify to fit a web site.

Asif Iqbal

July 29th, 2010

That’s a trick. Very good post and easy way to create buttons.

Tony

August 19th, 2010

I’m guessing…this took an eternity to complete this article. RESPECT.

Eric K.

November 23rd, 2010

Is there anyway to use this button in order to have it as a Submit button on a form?

I have a form with 2 fields that are both hidden, username and password. this is for my personal local site that i use at work in order to log me in, just figured I’d make it look nice, well this is a great tutorial and was just wondering if I might be able to use this button within a form as a submit button? Please let me know. Thank you

Frank

December 27th, 2010

I know this is a really old post but, is it possible to use more than 2 images? This is an awesome tutorial.

Jay

March 16th, 2011

Great tutorial! Very well explained and easy to follow. I have used this effect before but didn’t understand the jQuery behind it.

The few people who have criticized do not understand that this is just a tutorial. Whether they use this technique or not is up to them… They are welcome to continue with the web 1.0 look and feel. Us Designers who move forward with current web 2.x design trends appreciate your time!

Remo Harsono

April 4th, 2011

quite great tutorial. easy to grasp…thanks

Stéphane

September 17th, 2011

Hello,
First thanks a lot for this nice tutorial and please forgive my english, I’m just french ! ;)
It seems that transparency doesn’t work on png24 format ?…
Any solution ?…
thanks
Stéphane

Vincent

October 14th, 2011

Gr8 Tutorial Jacob. Im new to web-designing and i have the following problem with my design:

1) The size of my jpeg file(Button) is 150×50.So in order to get the hover effect before using jquery i had to change ur css code to .cta-button a:hover {
background-position:0 100%;
}
or else the other image dosent appear.

2) After applying jquery the button just fades into a blank white space and reappears after the cursor is moved away. The Hover image does not appear. Im guessing that the problem lies in .css({ ‘backgroundPosition’: ’0 0′ }) line.. Can u help me out with this? I cant seem to figure it out. Yeah i know its a noobish question but im learning..

Vincent

October 14th, 2011

And if i remove this .css({ ‘backgroundPosition’: ’0 0′ }) line the hover image appears but the button continues to fade to a blank white space.. Some help would be appreciated.

Vincent

October 14th, 2011

Ignore The ABove Comments plz.. Really stupid mistake on my part. Again Thanks for the great tutorial.

jorge

May 31st, 2013

A question.. My text disappears me when it does the carregamento again , as my image nao has at all writing , and want to do this like a button!

Leave a Comment

Subscribe to the comments on this article.