6 Useful CSS Button Recipes You Can Copy & Paste

by on 8th April 2011 with 67 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

67 Comments

Subscribe
Membership
About the Author