No Image Aqua Buttons with CSS3

More Semantic CSS3 Aqua Button (No Gradients)

Thanks zoleytaylor for the tip, and Jim for improving the aqua button by rewriting it with box-shadow:inset. Now it is really semantic!

Working as expected on:

• WebKit Nightly (current)
• Safari 4 (not yet working!)
• Chrome 4
• Firefox 3.6

Working but not perfect:

• Opera 10.5 - no text shadow on input value (Note: box-shadow and border-radius fail on public 10.1)

My Original CSS3 Aqua buttons with Background Gradients

Working as expected on:

• WebKit Nightly (current)
• Safari 4
• Mobile Safari 4 (iPhone)
• Chrome 4
• Firefox 3.6

Screen Capture of the button on WebKit

Feb.5 2010
My bad. I edited the supported browsers for the new button. The inset value for box-shadow is not yet supported on Apple Safari4.

Feb.4 2010
Re-written by Jim, making it more semantic by using box-shadow inset and removing "glare" div.
Will add on my blog soon!

Jan 2010
Added support for Mozilla.
Now Mozilla supports the CSS gradient but the implementation is different from that of WebKit. For more info, visit Moz Hacks.
GirlieMac! Blog - CSS3 Aqua Button - Revisited for Firefox 3.6

Nov 2009
Working as expected on Chrome4.

July 2009
Almost working perfectly on Chromium for Ubuntu.

April 2009
The first demo, only for Webkit Nightly and Safari4.
GirlieMac! Blog - CSS3 Gradients: No Image Aqua Button