The humble button + a sprinkling of css

I always figured buttons were born into this world boring, had boring childhoods and died well… boring.

See what I mean? But after reading Shiny Happy Buttons at 24ways.org, my entire world view shifted:

Wow!! (Firefox 3)

Note: They obviously look great in Firefox but so too in Safari (Chrome seems to do something weird to them for some inexplicable reason. They’re both supposed to use Webkit though right?! Right???!!!) and IE although not identical - IE doesn’t do rounded corners:

Still lovely in IE me thinks although the padding is somewhat exaggerated. Safari:

Last, and in this case certainly least, Chrome:

And here’s the Css:

.buttons button {
    padding: 7px 10px;
    color: #ffffff;
    font-weight: bold;
    text-shadow: 1px 1px 1px #000;
    border: solid thin #882d13;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    -webkit-box-shadow: 2px 2px 3px #999;
    box-shadow: 2px 2px 2px #bbb;
    background-color: #ce401c;
}