6 Useful CSS Button Recipes You Can Copy & Paste

by on 8th April 2011 with 66 Comments

CSS3 is completely changing the game for creating buttons on the web. Techniques that were once only possible with images are now easily executable with just a few lines of code. For this post we custom built six attractively styled CSS buttons for you to copy and paste right into your projects, zero attribution required.

As with anything good in CSS3, the buttons below work great in Webkit and Mozilla browsers, but various versions of IE will fall short.

A Quick Note About Semantics

The examples below are a bit heavy on HTML markup and many of them could easily be leaner. I structured them like this so that I could keep the CSS nice and separate for various parts of the button. This is so you can mix and match different portions of each of the examples below. If you implement any of these, be sure to take a close look at both the CSS and HTML to see if you can trim any fat.

Rounded Button: Two Lines

Sometimes a single line of text just doesn’t cut it. Use this button when you have a lot to say and want to cram it into a small space. For styling, I used a gradient from #99CF00 to #6DB700 and a few simple border treatments.

cssbutton

HTML

Sign Up Now Free!

30 day risk free trial.

CSS

.button { /*basic styles*/ width: 250px; height: 50px; color: white; background-color: #99CF00; text-align: center; font-size: 30px; line-height: 50px; /*gradient styles*/ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#99CF00), to(#6DB700)); background: -moz-linear-gradient(19% 75% 90deg,#6DB700, #99CF00); /*border styles*/ border-left: solid 1px #c3f83a; border-top: solid 1px #c3f83a; border-right: solid 1px #82a528; border-bottom: solid 1px #58701b; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; -webkit-gradient(linear, 0% 0%, 0% 100%, from(#99CF00), to(#6DB700)) } .button h3 { font-size: 20px; line-height: 35px; font-family: helvetica, sans-serif; } .button p { font-size: 12px; line-height: 4px; font-family: helvetica, sans-serif; } a { text-decoration: none; color: fff; } .button:hover { background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#6DB700), to(#99CF00)); background: -moz-linear-gradient(19% 75% 90deg,#99CF00, #6DB700); }

Red Pill

This simple but attractive red button uses heavily rounded corners to give it a pill-like shape. You'll find a background gradient from #d46d45 to #b1432a and some slight border effects on the top and bottom. Once again, the hover effect is simply an inverse effect.

css button

HTML

Press Me!

CSS

.button { /*basic styles*/ width: 250px; height: 50px; color: white; background-color: #d46d45; text-align: center; font-size: 30px; line-height: 50px; /*gradient styles*/ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#d46d45), to(#b1432a)); background: -moz-linear-gradient(19% 75% 90deg,#b1432a, #d46d45); /*border styles*/ border-top: solid 2px #e28d79; border-bottom: solid 1px #51281f; border-right: solid 1px #d46d45; border-left: solid 1px #d46d45; -moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px; } .button p { font-size: 25px; line-height: 50px; font-family: 'Trebuchet MS', sans-serif; } a { text-decoration: none; color: fff; } .button:hover { background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#b1432a), to(#d46d45)); background: -moz-linear-gradient(19% 75% 90deg,#d46d45, #b1432a); border-top: solid 2px #b1432a; border-bottom: solid 1px #e28d79; }

Dark Letterpress

Here I used a letterpress technique to achieve an inset look on the text. Basically all you do is make the text darker than the background and then give it a light-colored shadow. For the hover effect I just lightened up the colors a bit.

css button

HTML

Inset Button

CSS

.button { /*basic styles*/ width: 250px; height: 70px; color: #171717; background-color: #4f4f4f; text-align: center; font-size: 30px; line-height: 50px; /*gradient styles*/ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4f4f4f), to(#1d1d1d)); background: -moz-linear-gradient(19% 75% 90deg,#1d1d1d, #4f4f4f); /*border styles*/ border-top: solid 2px #8f8f8f; border-bottom: solid 2px #1a1a1a; border-left: solid 2px #4f4f4f; border-right: solid 2px #4f4f4f; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } .button p { font-size: 30px; line-height: 70px; font-family: verdana, sans-serif; font-weight: bold; text-shadow: 0px 2px 3px #444; } a { text-decoration: none; color: fff; } .button:hover { background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#616161), to(#292929)); background: -moz-linear-gradient(19% 75% 90deg,#292929, #616161); border-top: solid 2px #8f8f8f; border-bottom: solid 2px #282828; } .button p:hover{ text-shadow: 0px 2px 3px #555; }

Black Beauty

For this button, I really wanted to create something slick and classy. To accomplish this, I implemented three tricks. First, I applied some stopped gradients to give it that glossy look. Next, I applied an inner shadow, which is a great trick for adding depth and lighting effects. Finally, I applied a slight glow through the use of a text shadow. On hover, I reduce the glow and intensify the shadow.

cssbutton

HTML

Shiny Gloss

CSS

.button { /*basic styles*/ width: 250px; height: 70px; color: #fff; background-color: #000; text-align: center; font-size: 30px; line-height: 50px; /*gradient styles*/ background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #2f2f2f), color-stop(.5, #1e1f1f), color-stop(.51, #0c0c0c), to(#000)); background: -moz-linear-gradient(top, #2f2f2f, #1e1f1f 50%, #0c0c0c 51%, #000); /*border styles*/ border-top: solid 2px #555; border-bottom: solid 2px #111; -moz-box-shadow:inset 0 0 15px #000000; -webkit-box-shadow:inset 0 0 15px #000000; box-shadow:inset 0 0 15px #000000; } .button p { font-size: 30px; line-height: 70px; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300; text-shadow: 0px 0px 3px #888; } a { text-decoration: none; color: fff; } .button:hover { -moz-box-shadow:inset 0 0 50px #000000; -webkit-box-shadow:inset 0 0 50px #000000; box-shadow:inset 0 0 50px #000000; } .button p:hover { text-shadow: 0px 0px 3px #444; }

Blue Pill with Icon

The blue pill button combines the glossy stylings of the previous button with the shape of the red pill from above. Again I used some glossy gradients and in inner shadow, but to make things interesting I added an icon: a little pencil. The great thing about this icon is that it doesn't require any special fonts, just HTML! It's a neat little addition that can really jazz up a contact button with zero effort.

css button

HTML

Write to Us ✎

CSS

.button { /*basic styles*/ width: 250px; height: 50px; color: #fff; background-color: #125182; text-align: center; font-size: 30px; line-height: 50px; /*gradient styles*/ background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #125182), color-stop(.5, #1269ab), color-stop(.51, #004375), to(#00345b)); background: -moz-linear-gradient(top, #125182, #1269ab 50%, #004375 51%, #00345b); /*border styles*/ -moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px; -moz-box-shadow:inset 0 0 10px #000000; -webkit-box-shadow:inset 0 0 10px #000000; box-shadow:inset 0 0 10px #000000; } .button p { font-size: 30px; line-height: 50px; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300; text-shadow: 0px 0px 3px #555; } a { text-decoration: none; color: fff; } .button:hover { -moz-box-shadow:inset 0 0 50px #000000; -webkit-box-shadow:inset 0 0 50px #000000; box-shadow:inset 0 0 50px #000000; } .button p:hover { text-shadow: 0px 0px 3px #888; }

Like/Don't Like Buttons

Here I created two circular buttons meant for implementing a simple rating system. The green button signifies a positive vote and the red a negative vote. As with the last button, the icons here are purely HTML and don't require any @font-face tricks.

cssbutton

HTML

CSS

.green { background-color: #00ab26; } .red { background-color: #d90004; } .button { /*basic styles*/ width: 100px; height: 100px; color: #fff; text-align: center; font-size: 30px; line-height: 50px; float: left; margin-right: 20px; /*gradient styles*/ /*border styles*/ -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; /*shadow styles*/ -moz-box-shadow: 2px 3px 5px #bfbfbf; -webkit-box-shadow: 2px 3px 5px #bfbfbf; box-shadow: 2px 3px 5px #bfbfbf; } .button p { font-size: 50px; line-height: 100px; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300; text-shadow: 0px 0px 3px #888; } a { text-decoration: none; color: fff; } .button:hover { -moz-box-shadow:inset 0 0 30px #444; -webkit-box-shadow:inset 0 0 30px #444; box-shadow:inset 0 0 30px #444; } .button p:hover { text-shadow: 0px 0px 4px #fff; }

Conclusion

I hope these buttons prove useful to you. Even if browser limitations cause some of these to be not quite implementation ready, they still provide great learning examples for some of the awesome new features of CSS3.

Leave a comment and let us know what you think!

Comments & Discussion

66 Comments

Comments & Discussion

66 Comments

  1. shruti says:

    Nice css.. thanks for all the help

  2. Callum says:

    Great stuff. These will come in very handy for some of my current projects. Pretty buttons too!

    Cheers.

  3. Ralph says:

    These are indeed nice looking buttons. I first skimmed the article and wanted to ask why you choose for an extra div instead of setting the anchor tag to display block, but I’ve read your intro now :)

  4. Erik says:

    Looks nice but the HTML is invalid. Anchor tags should not contain elements like div and p. When those elements are replaced with spans it should validate too! Looks good though!

  5. Dutch says:

    Did you really put html tags like div, h3 and p between a tags? :o

  6. Joshua Johnson says:

    I thought that looked messy but got caught up playing with CSS and forgot to go back and fix it. Sloppy mistake but it’s better now. Thanks guys!

  7. Uhm, I really like the styling of the buttons, and the CSS aproach is great. But as the other posters mentioned the HTML will not validate. For the first example I think you could use an anchor with a class=”button”, and using to seperate the lines?

  8. Sorry, the break tag got stripped out on the last line, I meant “using a break tag to seperate the lines.”

  9. s says:

    Most amazing post.thnks.

  10. Good stuff. Thank you.

    While we’re on the subject I have a question: Am I the only one pondering what impact this is going to have on using it? In other words, the previous image only method was done by those who were able & willing to do so. Not that it was difficult, it just too a bit extra effort and knowledge.

    Now that the luxury of gradient buttons is coming to the masses, what are the able & willing going to shift to in order to stay a step ahead?

    Maybe it’s just me.

  11. LOL says:

    OH NOES! Gradient buttons are mainstream!!!

    STFU, Chief Alchemist.

    Stupid hipster.

  12. Thanks for the tips – they look pretty schmicko and will suit call to action buttons. Will try these out with future client websites ;)

  13. Neha says:

    Buttons are too tempting to use…but what about the BAD IE support :(

    But still going to ctrl+c and ctrl+v

    Thanks,
    Neha

  14. Edson says:

    Great examples! But let’s consider a more efficient shorthand for borders. Intead of this:

    border-left: solid 1px #c3f83a;
    border-top: solid 1px #c3f83a;
    border-right: solid 1px #82a528;
    border-bottom: solid 1px #58701b;

    Let’s use this:

    border: 1px solid;
    border-color: #c3f83a #82a528 #58701b #c3f83a;

    And why not use filter and -ms-filter for gradients to render in IE? I think semantics are not considered here.

  15. blah says:

    @Dutch HTML5 changed the specification for anchors, you are now allowed to enclose both flow and phrasing elements.

  16. Parker says:

    This is brilliant. Thank you!

  17. Ashish says:

    Very nice, best part of it is – I never knew about the HTML code for the hand character which is ☝ and ☟

    Thanks!

  18. Aming says:

    awesome, thank you very much…

  19. Muy_Bien says:

    Hey ! awesome !!
    But the one I prefer doesn’t have the code CSS…
    Can you fix it ? I talk about the Dark Letterpress. The css part is : “04e5fdc779bd3cefea35890b1bf4f1c9005″ and I don’t thing this is CSS :D

    Thanks !

  20. Beben-Koben says:

    interesting, thanks for code \m/

  21. Cristallix says:

    It’s a good article, but you forget the properties of Opera, which support linear gradient to.

  22. Cristallix says:

    I’m sorry for double posting, but what do you think about my buttons on http://www.laurent-fenetres.fr, where it’s writen “témoignages” and “destockage”?

  23. Missey says:

    It would have been nice if this tutorial actually used CSS to produce the buttons – rather than using images – or perhaps you could include a link to a page that uses these (as CSS), that way we could quickly check the effect for ourselves in the various browsers.

    @Edson – yes it would be nice to include the markup for IE also.

  24. Great examples thanks – looks like the pain of saving buttons as images are all over! Thanks goodness

  25. deven verma says:

    Thanks nice article.. nice collection .

  26. Anji says:

    nice article. Thanks for the detailed explanation.

  27. Namrata says:

    Nice. But doesn’t work in IE

  28. Great Post – thank you.

  29. Dutch says:

    I have to take my previous comment back. I just discovered that block-level links are valid in HTML5. I just started yesterday with HTML5 so don’t blame, haha.

  30. e11world says:

    The Dark Letterpress css code on your blog is not showing properly on Firefox and you’ve missed the number sign on the a tag for all of them.
    Nice code and very handy though. Some improvements to minimize code would be great as well.

  31. Many Thanks for this nice buttons

  32. Ryan Wheale says:

    I agree with Missy. Why not provide REAL examples with HTML and CSS. This would allow visitors to open your link in different browsers to see how those browsers will render it.

  33. Thanks for the post !
    For the like button, I think it would be possible to make it even more simple by using :after pseudo-element and { content:’\261D’; } on the .

  34. Hans Grimm says:

    Just wondering why you don’t use links for these buttons, as I assume the buttons should lead somewhere. Much more accessible. I think I can style an exactly the same, with an occasional thrown in :)

  35. Hans Grimm says:

    Hmm, can’t use tagnames.. Meant to say “..style an <a> exactly the same, with an occasional <span> thrown in” :)

  36. Jefry says:

    thank you
    I will use some of you have shared this on my website
    always successful

  37. Do you mind if I quote a few of your articles as long as
    I provide credit and sources back to your blog?
    My blog is in the exact same area of interest as yours
    and my users would certainly benefit from some
    of the information you provide here. Please let me know if this alright
    with you. Regards!

Leave a Comment

Subscribe
Membership
About the Author