Line25

How to Build a Simple Button with CSS Image Sprites

Read the full post

The button is one of the most common elements in the world of the web. In modern web design, buttons are used not only on forms but also as visual aids that draw attention to important elements of the page. Let’s take a look at building a simple button using CSS image sprites, starting right at the beginning in Photoshop and finishing with the complete code example. This one’s a good one for anyone getting started with CSS!

CSS Button Example

View the demo

The button we’ll be created takes on traditional styling using subtle gradients and outlines to give the impression of a rounded, three-dimensional object that’s just waiting for a prod from a chubby finger. The button will also use three states, an up/normal state, a hover state that gives a visual clue and a depressed state that gives an element of realism, making it act just like a button in real life.

Simple Button with CSS

Start work in Photoshop, grab the Rounded Rectangle Tool, enter a large radius figure in the options bar and drag a shape onto the canvas.

Simple Button with CSS

Double click the layer to open up the Layer Styles window. The first style we’ll add is a Gradient Overlay. Adjust the color swatches to fade from #a8a8a8 to #ffffff vertically across the button.

Simple Button with CSS

Next, add a stroke to the button. Use the colour #cbcbcb at 5px in size.

How to Build a Simple Button

To create an inner-stroke, use the Inner Glow option, but change the settings to Normal / #c2c2c2 / 100% Choke / 3px Size.

How to Build a Simple Button

Type out the desired verb or command for the button and set in an appropriate font. Align the text centrally on the button graphic.

How to Build a Simple Button

Open up the layer styles for the text and add a Gradient Overlay of #9a9a9a to #7c7c7c.

How to Build a Simple Button

To give the text an etched appearance, add an Inner Shadow. Tone down the effect to 21% Opacity / 2px Distance / 3px Size.

Button with CSS Image Sprites

Finally add a subtle highlight to finish off the etch effect using a Drop Shadow. Change the settings to Normal / #ffffff / 33% Opacity / 2px Distance / 1px Size.

Button with CSS Image Sprites

Select the button and text layer and drag down vertically while holding ALT and Shift to create a duplicate. Align the duplicate exactly to the bottom edge of the original. Alter the stroke of the duplicate to a slightly darker tone.

Button with CSS Image Sprites

Create a third duplicate, this time edit the Gradient Overlay and reverse the direction, this simple tweak gives the illusion that the button has been pressed.

Button with CSS Image Sprites

The three button states are complete and ready to be exported. Each graphic has subtle changes that will alter the appearance of the button when coded with CSS.

Button with CSS Image Sprites

Draw a selection around the buttons, hide the background and Save for Web. Choose the PNG24 option to allow alpha transparency.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Button</title>

<style type="text/css">

* { margin: 0; padding: 0; /* Quick and Dirty Reset */ }

body {
	background: url(bg-repeat.png);
}

#demo {
	width: 433px; margin: 100px auto;
}

</style>
</head>

<body>

<div id="demo">
	
</div>

</body>
</html>

Open up your favorite coding application and create a simple XHTML document.

<p><a href="#" class="press-it-btn">Press it</a></p>

Write out the HTML code for the button. We’ll be using a simple anchor stating the term Press it, as that’s what we have used on the graphic. Being an inline element we’ll contain it within a block element of a paragraph, and give it a class to allow us to target it with our CSS powers.

#demo p a.press-it-btn {
	display: block; 
	width: 433px; height: 174px; 
	background-image: url(button-sprite.png); 
	background-position: top; 
	text-indent: -9999px; 
}

Next, write out some CSS coding for the button. Firstly we’ll need to change the anchor from its default state of inline element to block. This will then allow us to specify a width and height. Notice the height is of each individual button graphic, not the image sprite as a whole. We can then attach the background image to the anchor and position the background to the top. To finish off the button use a text-indent to shift the rendered HTML wording off screen.

#demo p a.press-it-btn:hover {
	background-position: center; 
}
#demo p a.press-it-btn:active {
	background-position: bottom;
}

With the button in place, the pseudo classes can be added to the anchor. Change the background position to center for the hover state and bottom for the active state. This will change the button’s appearance on mouse over and when the user clicks. Give it a test in the browser.

Button with CSS Image Sprites

a { outline: none; }

What’s this?! An ugly dotted line around our button on mouse click? Sometimes browsers add their own accessibility features, but they can spoil the look of the design. It can be simply fixed by removing the outline altogether. Leaving it like this is a serious accessibility faux pas, so don’t forget the next step!

#demo p a.press-it-btn:hover, #demo p a.press-it-btn:focus

Because we’ve just removed the browser’s outline, a user navigating by keyboard won’t be able to see where they are on the screen. We can add our own highlighting by adding the focus pseudo class to the CSS, for example, we can style up the button to give the same appearance as a mouse hover.

CSS Button Example

View the demo

  • 187
100 HD Blurred Backgrounds

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of 100 HD Blurred Backgrounds + bonus 10 realistic web shadows.

100 HD Blurred Backgrounds

Written by Iggy

Iggy is a designer who loves experimenting with new web design techniques collating creative website designs. You can follow Iggy on Twitter.

37 Comments

  1. Tyrone says:

    Great tut Chris as always. love the work you produce. The power of sharing, is the power to evolve.

  2. ronald says:

    cool, that’s easy to follow

  3. ray world video says:

    thank you good work…

  4. wnabcreative says:

    Today I’ve tried, but having trouble with hover effect. It’s showing full image I mean other duplicates. Please someone help me.

  5. mehdi says:

    nice simple and clean i love it!

  6. chaitrax says:

    Works fine in safari…not work in IE 8.. any hack for this…

  7. Akbar says:

    Very Nice! I love CSS but I’m absolutely a new beginner. :))

  8. Jase says:

    This solves the problem of having to make Javascript for roll over images external and unobtrusive – just use css instead. Brilliant

  9. Ashwin says:

    Heard that the “text-indent: -9999px;” will crash the Safari Browser in iphone and ipod touch permanently.. is there any other way other tan using that???

  10. dolito says:

    Nice little tut, tnx.

    But you’ve forgotten the end tag for the hyperlink. ;-)

    [code]
    Press it
    [/code]

  11. Fensonism says:

    easy, thorough, simple. Perfect for beginners.

  12. Fensonism says:

    easy, thorough, simple. Perfedt for beginners.

  13. jay design says:

    Nice, slick looking button. Thanks for this easy to follow tutorial, will be using this at some point!

  14. Shitic says:

    thanks for trick

  15. nick says:

    why is it that the sprite breaks if you click and drag off the button? I realize that in this example it doesn’t really matter, but I am curious all the same.

  16. darwin says:

    nice tutorial… thx for sharing it :D

  17. glaz says:

    Frankly speaking, the Internet is a bit tired of all that unuseful rollover “buttons”. There are 2 major flaws about such technique:
    1. It is not a button. It is a hyperlink. And hence it won’t be sematically correct to use it as a button. Additionally it’s gonna be painful to attach POST-form submitting on it. All of this eliminates progressive enhancement paradigm

    2. May be there is only me considering it as a problem: the button is not translatabe and stretchable.

    Anywho, this is not to insult the author. Best wishes!

    • tibor says:

      My thoughts exactly. This can be done with pure CSS, which then would have soo many advantages.
      Like no resource (png) to download (faster), button text can be dynamic, etc.

  18. Designect.Com says:

    Very nice! Thanks!

  19. f055 says:

    Very clean and nice tutorial. Useful too, although I can’t say I didn’t know that before :)

  20. Jason says:

    Great tutorial, Chris.

  21. Mesothelioma says:

    Good info. Thanks for posting.

  22. Rich says:

    Outstanding — thank you Chris!

  23. Nicolas Crovatti says:

    Hi Chris, excellent tutorial!

    Did you know that there are generators for building CSS sprites ? I released mine a couple weeks ago. It could saves time to all web designers/developers.

    Give it a try: http://css-sprit.es

  24. Chris Spada says:

    Awesome tutorial, I’m definitely going to be using sprites more often. Thanks

  25. mark says:

    nice simple, and very effective.

    Chris. I think you forgot to close the anchor in the code example.

  26. Guy Arceneaux says:

    Very straightforward and illuminating! Thanks for your post.

  27. Duy says:

    Very nice! Useful tutorial!

  28. JonnyRoboto says:

    PRICELESS!! That is so simple and so cool at the same time!

  29. Jad Limcaco says:

    Great tutorial Chris. Although it would be good for the beginners here if you would have added another state, like :hover to it so it even looks better, IMO.

    Anyways, keep up the great work with the blogs.

  30. Glenn Van Bogaert says:

    Hi Chris, very nice tutorial. It can be useful to create my own menu for my portfolio.

  31. Joan says:

    Great tutorial, I totally forgot about the :active pseudo-class. Nice to see it in action, I will be using this from now on!
    Thanks for sharing!

  32. Callum Chapman says:

    Very nice, like the etched type :)

  33. adrian says:

    Very good info as always Chris – Thanks

  34. EZ Website Monitoring says:

    It’ so simple but useful, and what a cool touch to add to a menu or button. As always, thanks for sharing.

  35. Austin Bankruptcy Lawyer says:

    Great post. I really like the button and the tutorial was easy to follow. Thanks.

  36. Davor says:

    Nice, clean and simple to follow CSS tutorial as always. Tnx.

Leave a response