6 Useful CSS Button Recipes You Can Copy & Paste

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.

2 Million+ Digital Assets, With Unlimited Downloads

Get unlimited downloads of 2 million+ design resources, themes, templates, photos, graphics and more. Envato Elements starts at $16 per month, and is the best creative subscription we've ever seen.

Graphic Templates

Graphic Templates

Logos, Print & Mockups
 Graphics

Graphics

Icons, Vectors & More
 Web Templates

Web Templates

Landing Pages & Email
 Presentation Templates

Presentation Templates

PowerPoint & Keynote
 Fonts

Fonts

Sans Serif, Script & More
 CMS Templates

CMS Templates

Shopify, Tumblr & More

See More

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.

[/code]

CSS

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!

[/code]

CSS

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

[/code]

CSS

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

[/code]

CSS

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 ✎

[/code]

CSS

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

☝

☟

[/code]

CSS

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!