4 ms·

This is my in-progress collection of CSS3 buttons. Any ideas for more styles?

106 points by Halienja 16y ago

scrrr 16y ago
Thank you for sharing these. Suggestions: Add hover- and mouse-down styles for all of them. For example "Launch" only has a hover-style, but does not change when you press it. (on Chrome/OSX at least)
- ubuwaits 16y ago
  Thanks. Adding hover and active states for all the buttons will happen soon.
- ubuwaits 16y ago
  Almost all of the buttons have hover and active states now. More refinements will be made shortly.
  - scrrr 16y ago
    Looks good. :)
filipcte 16y ago
I'm a big fan of ZURB's CSS3 buttons: http://www.zurb.com/blog_uploads/0000/0617/buttons-03.html http://www.zurb.com/blog_uploads/0000/0617/buttons-03.html
- deleted 16y ago
  [deleted]
theycallmemorty 16y ago
They don't look too bad in IE8.
- justinwhite15 16y ago
  They also don't look too bad in the IE9 beta.
DTrejo 16y ago
More button styles you could add to the gallery: http://www.sencha.com/blog/2010/08/23/resolution-independent-mobile-ui/ http://www.sencha.com/blog/2010/08/23/resolution-independent... (resolution independent buttons!) http://www.webdesignerwall.com/demo/css-buttons.html http://www.webdesignerwall.com/demo/css-buttons.html http://lab.simurai.com/css/buttons/ http://lab.simurai.com/css/buttons/ (super juicy and glossy! mind the flaws) http://brandonmathis.com/blog/2009/11/19/fancy-buttons-are-here/ http://brandonmathis.com/blog/2009/11/19/fancy-buttons-are-h... (complicated)
jayair 16y ago
I had written a detailed article about it before - http://blog.anomalyinnovations.com/2010/03/creating-a-realistic-looking-button-with-css3/ http://blog.anomalyinnovations.com/2010/03/creating-a-realis... It uses a gradient image but that could easily be replaced with the CSS3 gradient.
ashitvora 16y ago
You might wanna add Hover, Click affect to this button.
dunstad 16y ago
The 'clarify and 'X' buttons show their corners in Chrome, looks a bit messy.
- ubuwaits 16y ago
  This is the result of a known bug in Chrome/Win and Chrome/Linux: http://code.google.com/p/chromium/issues/detail?id=29427 http://code.google.com/p/chromium/issues/detail?id=29427
samg_ 16y ago
Navigation buttons: Back, Forward, Up, Top, etc.
grandalf 16y ago
very cool. Might I request some that look like the buttons in Tender? I like the smooth minimalism: http://tenderapp.com/tour/collect/ http://tenderapp.com/tour/collect/
fady 16y ago
nice job!
barmstrong 16y ago
The redact one looks like it degrades gracefully in IE8 and 7. I noticed these are all using the <button> tag. Hopefully they look just as good with the <input type='submit'> Have been looking for a good CSS button for a while that degrades gracefully in IE's, and can be used as a submit tag as well as link, etc. Does anyone have a favorite?
- ubuwaits 16y ago
  These buttons should look just as good using the input tag. There might be very slight differences in certain browsers, but nothing drastic.
wilhelm 16y ago
I made these buttons a while ago: http://e-tjenesten.org/eksperimenter/knapp/ http://e-tjenesten.org/eksperimenter/knapp/
deleted 16y ago
[deleted]

106 points by Halienja 16y ago

scrrr 16y ago

Thank you for sharing these. Suggestions: Add hover- and mouse-down styles for all of them. For example "Launch" only has a hover-style, but does not change when you press it. (on Chrome/OSX at least)

ubuwaits 16y ago
Thanks. Adding hover and active states for all the buttons will happen soon.
ubuwaits 16y ago
Almost all of the buttons have hover and active states now. More refinements will be made shortly.
- scrrr 16y ago
  Looks good. :)

filipcte 16y ago

I'm a big fan of ZURB's CSS3 buttons: http://www.zurb.com/blog_uploads/0000/0617/buttons-03.html http://www.zurb.com/blog_uploads/0000/0617/buttons-03.html

deleted 16y ago
[deleted]

theycallmemorty 16y ago

They don't look too bad in IE8.

justinwhite15 16y ago
They also don't look too bad in the IE9 beta.

DTrejo 16y ago

More button styles you could add to the gallery: http://www.sencha.com/blog/2010/08/23/resolution-independent-mobile-ui/ http://www.sencha.com/blog/2010/08/23/resolution-independent... (resolution independent buttons!) http://www.webdesignerwall.com/demo/css-buttons.html http://www.webdesignerwall.com/demo/css-buttons.html http://lab.simurai.com/css/buttons/ http://lab.simurai.com/css/buttons/ (super juicy and glossy! mind the flaws) http://brandonmathis.com/blog/2009/11/19/fancy-buttons-are-here/ http://brandonmathis.com/blog/2009/11/19/fancy-buttons-are-h... (complicated)

jayair 16y ago

I had written a detailed article about it before - http://blog.anomalyinnovations.com/2010/03/creating-a-realistic-looking-button-with-css3/ http://blog.anomalyinnovations.com/2010/03/creating-a-realis... It uses a gradient image but that could easily be replaced with the CSS3 gradient.

ashitvora 16y ago

You might wanna add Hover, Click affect to this button.

dunstad 16y ago

The 'clarify and 'X' buttons show their corners in Chrome, looks a bit messy.

ubuwaits 16y ago
This is the result of a known bug in Chrome/Win and Chrome/Linux: http://code.google.com/p/chromium/issues/detail?id=29427 http://code.google.com/p/chromium/issues/detail?id=29427

samg_ 16y ago

Navigation buttons: Back, Forward, Up, Top, etc.

grandalf 16y ago

very cool. Might I request some that look like the buttons in Tender? I like the smooth minimalism: http://tenderapp.com/tour/collect/ http://tenderapp.com/tour/collect/

fady 16y ago

nice job!

barmstrong 16y ago

The redact one looks like it degrades gracefully in IE8 and 7. I noticed these are all using the <button> tag. Hopefully they look just as good with the <input type='submit'> Have been looking for a good CSS button for a while that degrades gracefully in IE's, and can be used as a submit tag as well as link, etc. Does anyone have a favorite?

ubuwaits 16y ago
These buttons should look just as good using the input tag. There might be very slight differences in certain browsers, but nothing drastic.

wilhelm 16y ago

I made these buttons a while ago: http://e-tjenesten.org/eksperimenter/knapp/ http://e-tjenesten.org/eksperimenter/knapp/

deleted 16y ago

[deleted]