Designing CSS Buttons: Techniques and Resources


Buttons, whatever their purpose, are important design elements. They could be the end point of a Web form or a call to action1. Designers have many reasons to style buttons, including to make them more attractive and to enhance usability. One of the most important reasons, though, is that standard buttons can easily be missed by users because they often look similar to elements in their operating system. Here, we present you several techniques and tutorials to help you learn how to style buttons using CSS. We’ll also address usability.

Links vs. buttons

Before we explain how to style buttons, let’s clear up a common misconception: buttons are not links. The main purpose of a link is to navigate between pages and views, whereas buttons allow you to perform an action (such as submit a form).

In one of his articles, Jakob Nielsen writes about command links2, which are a blend of links and buttons. But he recommended that command links be limited to actions with minor consequences and to secondary commands. To learn more about primary and secondary commands (and actions), check out Primary and Secondary Actions in Web Forms3 by Luke Wroblewski. To learn more about the differences between links and buttons, read Creating Usable Links and Buttons624 at UXBooth.

Basic Styling

The simplest way to style links and buttons is to add background color, padding and borders. Below are examples of the code for the link, button and input (“Submit”) elements.

<a class="button" href="#">Sample button</a>
  <button class="button" id="save">Sample button</button>
  <input class="button" value="Sample Button" type="submit" />
.button {
  background-color: #dcdcdc;
  border: 1px solid #666;

This simple code minimizes the visual differences between links and buttons. And here are the rendered examples of the code above:


The important thing to note is that these three elements render differently with the same CSS. So, you should style these elements carefully to ensure consistency across your website or application.


Adding images to buttons can make the buttons more obvious. Sometimes the image itself clearly communicates the purpose of a button; e.g. a loupe icon for searching or a floppy disk icon for saving. The easiest way to add an image to a button is to use a background image and then position it accordingly. Below are our examples with a checkmark icon.

.button {
  padding: 5px 5px 5px 25px;
  border: 1px solid #666;
  background: #dcdcdc url(icon.png) no-repeat scroll 5px center;


Button States

In addition to their default state, buttons and links can have two other states: hover and active (i.e. pressed). It is important that buttons appear different in different states so that users are clear about what is happening. Any element in a hover state can be styled by invoking the :hover CSS pseudo-class.

a:hover {

Though very important, the active state is rarely implemented on websites. By showing this state, you ensure that your buttons are responsive and send a visual cue to users that a button has been pressed. This is called isomorphic correspondence, and it is “the relationship between the appearance of a visual form and a comparable human behavior” (Luke Wroblewski, Site-Seeing5). The article Pressed Button State With CSS6 elaborates on the importance of the active state.

a:active {

There is yet one more state, one that is seen when navigating with the keyboard: the focus state. When the user navigates to a button using the Tab key, it should change appearance, preferably to have the same appearance as the hover state.

a:focus {

The examples below shows the common way to style button states. The hover state is a bit lighter than the normal state, while the active state has an inverted gradient that simulates a pressed action. Although you need not limit yourself to this styling, it is a good place to start.


We should talk about how to handle the outline property7 for the :active and :focus states. Handling this property well is important for the experience of users who employ the keyboard as well as the mouse. In the article Better CSS Outline Suppression8,” Patrick Lauke shows how buttons and links behave in different combinations of states and explains why the outline property should be invoked only with the :active state.


The blue “Buy now” button on Apple.com9 has a slightly lighter background for the hover state and an inset style for active state. Even the main navigation button on Apple’s website implements all three states.


Although it doesn’t implement the active state, this fancy button on Tea Round10 has a nice fading effect on hover.


The “Read more” button on UX Booth11 turns green on hover and moves down one pixel in the active state, which simulates the effect of pressing a button.

Useful Reading

The article Rediscovering the Button Element12 shows the differences between links and buttons and explains how to style buttons easily.


Styling Form Buttons14 covers the basics of styling buttons, with many examples.


Beautiful CSS Buttons With Icon Set16 shows how to style buttons using background images. Although not scalable, these are really nice buttons.


Recreating the Button18 is a very good article that explains how Google ended up with the buttons that it uses on majority of its websites.


Scalable CSS Buttons Using PNG and Background Colors20 explains how to create really stunning buttons for all states. Although it uses jQuery, it degrades gracefully if JavaScript is turned off.


Sliding Doors: Flexible Buttons

One important consideration needs to be made when styling buttons: scalability. Scalability in this context means being able to stretch a button to fit text and to reuse images. Unless you want to create a different image for each button, consider the “sliding doors” technique. This technique enables you to create scalable, rich buttons.


The principle involves making two images slide over each other, allowing the button to stretch to the content. Usually, this is done by nesting a span element within a link. As shown in the image above, each element has its own background image, allowing for the sliding effect. The two code snippets below show the structure and basic styling for this effect.

<a href="#"><span>Typical sliding doors button</span></a>
a {
  background: transparent url('button_right.png') no-repeat scroll top right;
  display: block;
  float: left;
  /* padding, margins and other styles here */
a span {
  background: transparent url('button_left.png') no-repeat;
  display: block;
  /* padding, margins and other styles here */

The advantages of this technique are that it:

  • Is an easy way to create visually rich buttons;
  • Ensures accessibility, flexibility and scalability;
  • Requires no JavaScript;
  • Works in all major browsers.

Useful Reading

The “Sliding Doors of CSS” article on A List Apart (part 121 and part 222) covers the basics of this technique. Although a bit old, these articles are a must-read for every Web developer.


Also a bit old, Creating Bulletproof Graphic Link Buttons With CSS24 is an excellent article that shows how to create bulletproof, resizable, shrunk-wrap buttons. Also a must-read.


Filament Group has a variety of excellent articles and tutorials. Its second article on CSS buttons, Styling the Button Element With CSS Sliding Doors26,” explains how to create buttons by combining techniques. Although it doesn’t support the active state, it can be easily extended.


How to Make Sexy Buttons With CSS28 is one of the best and simplest explanations of the sliding doors technique. It also contains a little fix for the active state in Internet Explorer.


If you want Wii-like buttons, the article Simple Round CSS Links (Wii Buttons)30 provides all the necessary resources and explanation on how to style them.


The common way to achieve the CSS sliding doors technique is to use two images. However, the article CSS Sliding Door Using Only One Image32 shows that it is possible to achieve the same effect with only one image.


CSS Oval Buttons34 and CSS Square Buttons35 from Dynamic Drive are two other articles that show the effectiveness of CSS sliding doors.


CSS Sprites: One Image, Not Many

With CSS Sprites, one image file contains multiple graphic elements, usually laid out in a grid. By tiling the image, we show only one Sprite at a time. For buttons, we can include graphics for all three states in a single file. This technique is efficient because it requires fewer resources and the page loads faster. We all know that many requests to the server for multiple small resources can take a long time. This is why CSS Sprites are so handy. They significantly reduces round-trips to the server. They are so powerful that some developers use CSS Sprites for all their graphics. The Holy Sprites37 round-up on CSS Tricks offers some very creative solutions.

The example below shows the simplest use of CSS Sprites. A single image contains graphics for all three button states. By adjusting the background-position property, we define the exact position of the background image we want. The image we’re choosing to show here corresponds to a background position of top: -30px and left: 0.


a {
  background: white url(buttons.png) 0px 0px no-repeat;
a:hover {
  background-position: -30px 0px;
a:active {
  background-position: -60px 0px;

For general information and resources on CSS Sprites, check out The Mystery of CSS Sprites: Techniques, Tools and Tutorials38.”

Useful Reading

In this easy-to-follow tutorial How to Build a Simple Button with CSS Image Sprites39,” Chris Spooner explains how to create a CSS Sprites image in Photoshop and use it with CSS.


Transforming the Button Element With Sliding Doors and Image Sprites40 shows how to enrich a button element with a combination of sliding doors and image Sprites. It implements the active state in a very interesting way, not by using different images or colors but rather by positioning.

CSS 3: Buttons Of The Future

CSS 3 allows us to create visually rich buttons with just a few lines of code. So far, this is the easiest way to create buttons. The downside of CSS 3 is that it is currently supported only by Firefox and Safari. The upside is that buttons styled with CSS 3 degrade gracefully in unsupported browsers. By using the browser-specific properties -moz-border-radius (for Firefox) or -webkit-border-radius (for Safari), you can define the radius of corners. Here are a few examples of what can be done with the border radius property.


For better results, you can combine CSS 3 rounded corners with the background image property. The example below shows a typical button with a gradient image, the first without rounded corners, and the second with.


Compared to sliding doors, this technique is far simpler. However, if you want to maintain visual consistency across all browsers, then use sliding doors, because it works in all major browsers, including IE6. To learn more about the capabilities of CSS 3, read CSS 3 Exciting Functions and Features: 30+ Useful Tutorials41.” And here are a few good tutorials on styling buttons with CSS 3 features.

Useful Reading

Super Awesome Buttons With CSS 3 and RGBA42 shows the power of CSS 3 with rounded corners, Mozilla box shadows and RGBA, which is a color mode that adds alpha-blending to your favorite CSS properties. This is one of the best examples of CSS 3 buttons.


Create a CSS 3 Button That Degrades Nicely44 is a good example of CSS 3 buttons that degrade gracefully in browsers that don’t support CSS 3.


Creating buttons without Images Using CSS 346 explains the drawbacks of using images for buttons and shows several options for creating image-less CSS 3 buttons.


Emulating Google-Syle Buttons Using CSS 3 & dd_roundies JS48 is a fantastic article that shows how to create Google-like buttons. It goes even further and shows how to create the button pillbox commonly seen on Google pages.

Instant Tools: Are They Useful?

Tools exist for creating buttons, such as Easy Button and Menu Maker49 and My Cool Button50, and for creating CSS Sprites, such as CSS Sprite Generator51, but the question is, do they really help you create buttons that fit your needs. Although they are configurable and easy to use, your creativity and control over the results are limited, which makes for average-looking buttons. Using one-size-fits-all buttons is not a good idea.

The solution is to use Photoshop (or a free alternative52) and the proven techniques described in this article. If you are a beginner with Photoshop, here are several excellent tutorials on creating amazing buttons.

If you don’t know where to start, iPhone-Like Button in Photoshop53 is the perfect choice. In only 10 to 15 minutes, you will be able to create the kind of buttons seen on the iPhone.


How to Create a Slick and Clean Button in Photoshop55 is a very detailed tutorial that guides you through 30 simple steps and helps you learn the Photoshop basics. In addition, the article explains how to use these graphics in combination with HTML and CSS to create fully functional CSS buttons.


Photoshop Button Maker57 is a fantastic tutorial from PSD Tuts that shows how to create fancy oval buttons (or badges).


Buttons And Usability: Instead Of Conclusion

The techniques described above can help you create stunning buttons. However, because they play a critical role in website usability, the buttons should meet some key principles:

  1. First consider the labeling. Always label buttons with the name of the action that the user is performing. And always make it a verb59. A common mistake is to label buttons “Go” for various actions such as searching, sending email and saving. Labels should also be short and to the point; no need to clutter the user interface.
  2. As mentioned, include all button states (default, hover, active) to provide clear visual cues to the user as to what is happening. Button outlines should remain in the active state only.
  3. Clearly distinguish between primary and secondary actions. The most important action should be the most prominent. This is usually done by giving primary and secondary actions different colors.
  4. Pay close attention to consistency. Buttons should be consistent throughout a Web application, both visually and behavior-wise. Use CSS sliding doors for reused buttons or CSS 3 rounded corners to maintain consistency.
  5. Though obvious, we should note that the entire button area should be clickable.

The articles below provide even more usability guidelines and best practices for designing buttons.

Make Complete Button Surface Active and Enhance Usability60 is an in-depth article that shows mistakes in button design and that explains why the entire button surface should be clickable.


Creating Usable Links and Buttons624 explains why users expect buttons sometimes and links other times. It also shows how to choose between the two elements.


How to Design Buttons to Help Improve Usability64 explains some usability principles that should be considered when designing buttons. It covers the basics of icon usage, appearance, behavior, hierarchy and consistency.


↑ Back to topShare on Twitter

Janko Jovanovic is user interface designer, software engineer, blogger, speaker and artist. In his free time, he writes about user interfaces on his blog JankoAtWarpSpeed and tweets regularly on Twitter.

  1. 1

    Great post,

    These types of posts are extremely useful for reference!
    Thanks “Janko Jovanovic”

  2. 2

    i tend to use Submit with simply
    -webkit-border-radius: 4px;
    background: #06F;
    color: #fff;

    and then various active:hover styles

  3. 3

    This is a great article, but you should also have:

    -khtml-border-radius: XXpx;
    border-radius: XXpx;

    As additional properties as the -khtml is for Konqueror (just as “-webkit” is for Safari and “-moz” is for Firefox) and the plain border-radius is the eventual CSS3 property, so once they are ‘approved’ you won’t have to redo your css.

  4. 4

    I dont meant to sound rude but am I the only one who thinks that there are far too many of these generic articles going onto the Smashing Mag site at the minute?

    What happened to the once a week/every two weeks where you would get something that isn’t just the same reused examples?

    I much prefer quality over quantity and my thoughts are shared by each of my colleagues.

    This is in no way disrespecting the authors – more the the factory line process that seems to be in place at the minute.


  5. 5

    I absolutely do NOT agree to “[..] standard buttons can easily be missed by users because they often look similar to elements in their operating system.”

    That might be true for special advertising buttons (“Sign here”, “Buy now”) but not in general. Indeed it’s the other way round: Buttons get missed because the user doesn’t recognize them as buttons because they are (poorly) styled. If the user doesn’t recognize a system button, all OS developers would have done something really wrong. In fact the user does recognize a none-styled button much faster then a styled one, because he’s used to it by it’s daily used operating system.

  6. 6

    Nice Article Jovanovic. Keep up :)

  7. 7

    well written and well researched… a really nice reference
    thank you and two thumbs up :)

  8. 8

    Great article. I am a big fan of the sliding doors technique with a single image. It is clean, effective, and works in all browsers – what more do you want.

  9. 9

    Great post. very useful, and am saving it in my CSS “Bible”. More please!

  10. 10

    I love CSS buttons, I’m using the Zurb technique on my latest project it was so easy to implement and degradable from CSS3 too! They are super awesome!

  11. 11

    Great Post!!! Thanks for all the info and resources!

  12. 12

    Great article! Loved the emphasis on usability at the end. I can’t wait for the day that CSS3 buttons can be used in every day situations. So tired of cutting images just to have rounded corners and drop shadows…

  13. 13

    Excellent article. Bookmarked! Keep up the good work.

  14. 14

    You forgot the -webkit-gradient css3 stuff (-moz-gradient in ff 3.6) which deprecates the need for images at all. No images => faster development and faster site.

  15. 15

    Great post!

    The only thing I hate is the increase of these browser-specfic css tags. Yes they are great, but I don’t want to have to start adding all these unecessary css3 repeat codes just for it to appear in a single broswer such as Firefox and Safari. There needs to be global tags just like in CSS and CSS2 that works in all browers. It was already bad enough it’s IE6-specific then everyone else.. but now it seems it’s everyone-specfic. Boo.

  16. 16

    90% of this article will be totally outdated in a few months (or it’s already outdated)

  17. 17

    Great post. Lengthy, but very useful. Tutorials linked at the end are top-notch too!

  18. 18

    I’m with Danny on this one. Why does it seems like all the articles over the last few weeks are so generic? Personally, I got absolutely nothing out of this article, and while there is plenty of content, none of it seems to be outside of your average designer/developer’s preexisting knowledge-base.

  19. 19

    Snubbed again! I’ve been trying to get the word out about my totally practical CSS3 progressive enhancement buttons. You can see an example and get the full “framework” at

    They use CSS3 rounded corners, gradient overlays with transparency (so if you want to have multiple states you can just change the background color and perhaps the border rather than the bloat of image sprites or other non-CSS solutions). The framework also has pillboxes for all types of UI elements plus a full suite of internationalization/rtl built in. Can somebody please look at this and realize it’s cool?


  20. 20

    Sliding door with 2 images is a waste. It’s enough having only ONE image with a big width. It’s not necessary holding the right end in a separate image.

  21. 21

    Dude, are you trying to teach something or you want to post numerous links to other websites.

    Next time, pick one and stick to it.

  22. 22

    And just so you know, the “Post a comment” button here on smashing magazine has no hover or active state. Just a single state.

    bad! bad!! bad!!!

  23. 23

    thanks for this detailed article. many things were known to me but some were really new.. like in start code. you have mentioned button tag. I was totally unknown to this… i always used input tag for this !!

  24. 24

    Many thanks. I’ve used the sprite and the super awesome button of Zurb on some projects. From what I see, this will be a great time saver for web designers/developers.

  25. 25

    Great post ……

  26. 26

    Nice article to set the mood for the day :)

  27. 27

    nice… Thanks! =.)

  28. 28

    Excellent post and nicely put together by Janko. Thanks for these resources.

  29. 29

    Besides the styling aspects there is a technical aspect you unfortunately missed. Drew McLellan filed an article a year ago where he pointed out on misbehavings of the IE with the button element. By far the most intriguing one is, that IE6 (yes, our beloved dinosaur) sends the data of ALL buttons if multiple buttons are on one page. The article:

    I myself try to ignore the button-element as long as the dinosaur is around. There will be time and again two or more buttons on one page because of the usual search-form.

  30. 30

    Very useful and great article. Thanks very much.

  31. 31

    I see the articles in this site are now only for people who have no clue at all…

  32. 32

    For me this article is a perfect resource. During my studies I always have to deal with different types of code and programming languages and I just can not keep everything in mind. Especially stuff like this is a perfect bookmark for when we have to do something basic and I like to go the extra mile.
    This article quite obvious does not focus on professionals because as it says it is about Designing CSS Buttons: Techniques and Resources. What does the article contain? Techniques and Resources. I do not what else I would expect from the article.

    Sidenote: I think there is a markup error in Basic Styling. IMHO the input submit should look something like this: <input type=”submit” value=”Sample Button” class=”button”>

  33. 33

    Praise be to CSS3! Finally we are able to do stuff with CSS that actually looks good without images.

    Great article.

  34. 34

    Cool. and very useful. Thanks for this article.

  35. 35

    I would like to thank all those who featured on this site and definitely will come back to visit again

  36. 36

    Should buttons have hand cursor or not?
    Many pages have buttons with hand cursor, but buttons have arrow by default (even in desktop apps)


  37. 37

    What a fantastic article! Great roundup of everything you could possibly want to know.

  38. 38

    Thanks for the comment, Arlo! Error corrected.

  39. 39

    overall nice article…although somewhat dated.
    fyi, the link to top ten usability mistakes is broken.

  40. 40

    Smashing start to recycling recycled, I agree with Danny above, about quantity and quality.
    Fudging of the “new” articles content is not best way to continue…
    Check this sentence:
    “We try to convince you not with the quantity but with the quality of the information we present.”

    Familiar ?


    I see that you get rid of that drop down menu ;) and I like that.

  41. 41

    You should also include “Fancy Buttons” in this list.
    It’s a Compass plugin that uses CSS gradients and falls back to a png overlay on a solid color. It’s very flexible and is extremely simple. No hacks, no javascript, just beautiful buttons.

    Check out the three minute screencast and some screenshots here:

  42. 42

    I also have one image for my “Sliding Doors” links, but I’m using slightly different technique wich I find more elegant HTML-wise, since I don’t like empty tags to be used.

    ‹a href=””›

    a {
    background: url(button.png) top right;
    a span {
    background: url(button.png) top left;
    margin: 0 10px 0 -10px;
    padding: 5px 8px 5px 18px;

  43. 43

    nice work Janko, As a developer (more in to backend coding) I really find these kind of tutorials useful to understand/ develop front-end by my own

    thanks again..

  44. 44

    good collection!

  45. 45

    Found a pretty good “button framework” :
    all browser’s compliant, Requires no JS (except for personnalisation)

    As i always use Jquery, i find it really useful :)
    Nice post still, Thanks

  46. 46

    Floris Fiedeldij Dop

    November 21, 2009 1:44 pm

    Great read, thank you for the insight, I hope this finally helps those sites to unify their interface (button wise).

  47. 47

    Absolutely Brilliant article! The tone and manner the article was written in was so easily understood and followed. The topics and Information included was broken down and clearly communicated… even has someone as novice like me follow on with a very clear understanding! Great job, and look forward to your next articles.

  48. 48

    I’ve released a project called Sexy Buttons. It’s a HTML/CSS-based framework for creating beautiful web site buttons. Check it out at

  49. 49

    For those of you who are interested in using CSS3 to make really good looking buttons without images, please check out my tutorial at or see them in action at
    They employ the power of CSS gradients, box shadows, drop shadows, and transitions.

  50. 50

    Nice Article, Thanks.,

  51. 51

    Is it me or is the background-position information incorrect in the example on ‘CSS Sprites: One Image, Not Many’. I think the background-position values should be reversed, the first value specifies the horizontal not the vertical.

    I wouldn’t have noticed this had I not been using this article as a source of great information. Thanks!

  52. 52

    i did an experiment with CSS3 buttons by applying gradiant ,round corners and underline effects …checkout here

  53. 53


  54. 54

    Thanks for this amazing collection, here is another one great tutorial about creating pure css3 button:

  55. 55

    Good article, but it’s difficult to learn, specially for beginners. I would recommend to start from this one before reading the current article:

  56. 56

    Hi, I’ve read this article over and over again just to get a grasp on how to make a button for my menu in my website through CSS. The more time I spent reading article, the more confused I become.

    I am not a web designer and CSS topic is just too much for me to take on for now though I have a little knowledge… All I want is for my website to look presentable.

    Can anybody from here guide me step by step on how to make click-able buttons for my menu instead of just a plain text?

    I am a fast learner so I just need guidance where to go first and what to do first :) I promise.

    Thank you very much. By the way, this is my website that I want to beautify.

  57. 57

    I second your opinion

  58. 58

    I am thirding the shit out of your opinion

  59. 59

    As you mentioned – it depends. If you want to grab users’ attention, you would consider restyling default buttons’ appearance. With their default styling you certainly wouldn’t be able to grab almost any attention. But that’s not the only case. You can restyle buttons in order to emphasize primary actions, which is very important usability factor.

    But I do agree that poorly styled buttons can be easily missed.

  60. 60

    very nice post! thx.


↑ Back to top