CSS3 Buttons – 10+ Awesome Ready-To-Use Solutions (+All Related Tutorials You Need)

For years, it was images or JavaScript that usually helped us to create non-standard and attractive buttons.

With the getting-wider support for CSS3 features and stable resources that can CSS3-enable non-compatible browsers, there are no obstacles left for using CSS3 buttons.

Using CSS3 properties, there is a huge space of creativity for designing buttons; using border-radius for rounded corners, linear-gradient and box-shadow for creating depth, transitions for the animations and more.

Here is a list of 10+ nicely-coded and creative CSS3 buttons where you can use or get inspired. Also, you can find all other CSS3-buttons related resources that can help you to create better ones at the end of the article.

CSS3 Buttons With Simple Markup

CSS3 Buttons

A set of 18 buttons that are created with a simple markup as much as possible.

While 3 of them are WebKit-only, the other are compatible with all modern browsers.

GitHub-Style CSS3 Buttons

GitHub Style CSS3 Buttons

This is a simple CSS framework for creating GitHub-style buttons.

The buttons can have rounded corners and icons (a CSS sprite with a list of icons exist).

Zardi

Zardi CSS3 Buttons

Zardi is a ready-to-use CSS file for creating buttons in various shape and colors.

The file is sized ~4kb, however, using only the styles needed will help minimizing it.

Super Awesome Buttons with CSS3 and RGBA

CSS3 RGBA Buttons

These CSS3 buttons make use of box-shadow and border-radius CSS properties to create the look.

BonBon Buttons

CSS3 BonBon Buttons

BonBon buttons easily deserve the name they have with the shiny, 3D feel created.

After a standard CSS rule, they are customized with multiple CSS classes and buttons can be used with or without icons.

Fancy Buttons

Fancy CSS3 Buttons

The styles for Fancy Buttons are written with SASS but the source can be found easily in the demo page.

10 Nice CSS3 Buttons

Nice CSS3 Buttons

A set of 10 CSS3 buttons that offers a different option for every taste.

They make use of linear-gradient, box-shadow, border-radius and more.

CSS3 Animated Bubble Buttons

Animated CSS3 Buttons

A set of very chic and animated buttons that uses multiple backgrounds and transitions.

Pretty CSS3 Buttons

CSS3 Pretty Buttons

A slick button that uses RGBA, border-radius, box-shadow and linear-gradient.

We Love Buttons

We Love Buttons

A great set of buttons where most of them are only compatible with WebKit browsers.

They are created by different designers and the resource was shared previously at WRD.

Sexy Buttons

Sexy CSS3 Buttons

This is a HTML-CSS framework for creating buttons that can auto-grow, have icons and can use either <button> or <a> elements.

Also, a layered Photoshop template is provided for creating new skins.

Realistic CSS3 Buttons

Realistic CSS3 Buttons

A very good implementation of CSS3 buttons where the buttons can adapt to text with flexible widths.

Like every other CSS3 solution, they have issues with some browsers but offers a very clean and realistic experience.

Other CSS3 Buttons Resources

9 Comments
  1. Reply chodorowicz April 14, 2011 at 11:03 AM

    very usefull collection, especially two first sets are really nic, thx

  2. Reply Maxim April 15, 2011 at 8:23 PM

    This just saved me a day of searching. Thanks a lot.

  3. Reply Casey April 17, 2011 at 12:40 AM

    Thanks for sharing. I took one from the first set, ran it through some SASS color variations and made a few extra color versions.

    http://www.simplethemes.com/blog/entry/simple-css3-buttons/

  4. Reply Alan June 2, 2011 at 10:23 AM

    This is a new set of CSS3 Buttons that have cool animations using transitions and transforms.

    http://webdesigncrowd.com/animated-buttons-css3-transitions-transforms/

  5. Reply Bruce Galpin September 13, 2011 at 5:46 AM

    You can include these Google+ styled UI buttons to your list: http://shrapp.nl/post/google-plus-ui-buttons ~ Demo: http://code.shrapp.nl/google-plus-ui-buttons/demo.html

  6. Reply Lil Josh February 24, 2012 at 10:13 AM

    Here is a simple tutorial for some CSS3 Google buttons http://liljosh.com/css3-google-buttons/

  7. Reply Raymond December 31, 2012 at 4:05 AM

    beautiful design…

    about the css button, generator maybe a good way… (sometimes)

    http://css-button-generator.com/

    It can save your time… right?

  8. Reply Dhruv Thaker June 19, 2013 at 10:38 AM

    Nice css buttons. Thanks for nice collection.

  9. Reply Komai October 18, 2013 at 4:27 PM

    OMG, thanks so much I have finally know how to make my own button for my website project…!! 😀 Thanks thanks thankssss… ^-^

    P/S: I’m an idiot

Leave a reply

Search