/ best free open source web resources /

Graphic Resources

How to Create BonBon Buttons with CSS3

Posted · Category: Buttons, License Free

BonBon Buttons are sweet CSS3 buttons that are sexy looking, really flexible, but with the most minimalistic markup as possible. There are 3 different materials. A “mate”, “glossy” and a “glass” version. The difference of the later two is that the glass version adds a dark blurry text-shadow which makes it look like you can see trough the button to its bottom.

However, BonBon Buttons are not meant to be used on your next project that targets the average internet user. He just wanted to show a couple techniques how to use some of the new CSS3/HTML5 features. So only the current version of Safari, Chrome and Firefox are supported.


Requirements: CSS3 Support
Demo: http://lab.simurai.com/css/buttons/
License: License Free

  • Thanks for sharing these unique type of css buttons.The best thing about these buttons are that they requires very less css but the one of worst thing is that do not works on IE6 at all.

  • Really nice buttons. Thanks for sharing.

  • Serge

    It works, but on Chrome 5 the transparencies do not seem to work correctly.

  • GKL

    Interesting info, thanks for sharing!

  • Chris

    Awesome! CSS 3 buttons…
    IE 7 does not support this yet, too bat

Supported By


Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons