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

http://ubuwaits.github.com/css3-buttons/

by Halienja • 16 years ago

106 18 16 years ago

ubuwaits.github.com

scrrr2• 16 years 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)

ubuwaits4• 16 years ago

Thanks. Adding hover and active states for all the buttons will happen soon.

ubuwaits4• 16 years ago

Almost all of the buttons have hover and active states now. More refinements will be made shortly.

scrrr2• 16 years ago

Looks good. :)

filipcte• 16 years ago

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

theycallmemorty• 16 years ago

They don't look too bad in IE8.

justinwhite15• 16 years ago

They also don't look too bad in the IE9 beta.

DTrejo• 16 years ago

More button styles you could add to the gallery:

http://www.sencha.com/blog/2010/08/23/resolution-independent... (resolution independent buttons!)

http://www.webdesignerwall.com/demo/css-buttons.html

http://lab.simurai.com/css/buttons/ (super juicy and glossy! mind the flaws)

http://brandonmathis.com/blog/2009/11/19/fancy-buttons-are-h... (complicated)

jayair• 16 years ago

I had written a detailed article about it before - 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• 16 years ago

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

dunstad• 16 years ago

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

ubuwaits4• 16 years 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

samg_• 16 years ago

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

grandalf• 16 years ago

very cool. Might I request some that look like the buttons in Tender? I like the smooth minimalism:

http://tenderapp.com/tour/collect/

fady• 16 years ago

nice job!

barmstrong• 16 years 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?

ubuwaits4• 16 years 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• 16 years ago

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

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

Related Stories