I threw together a set of image-less glass and gradients buttons last night. They use a flat color behind a partially-transparent CSS3 gradient to create an overall glass or gradient effect. The nice thing about it is that the gradient style can vary independent of the color, and you don’t have to play with a color selector or do color math to get the gradients to look nice. You can simply setup one gradient and then you can change the flat color to suit what you need.
One obvious problem is that it won’t work in browsers that don’t support CSS gradients, and in browsers that do support gradients, but don’t support color stops, such as IE8, you can’t do the glass effect using this techique.
Another problem I found is with Firefox, and presumably any browser that uses gecko. When using a border-radius on the outer button element, it doesn’t fully extend the inner element to the edges of the button, so you get a nasty flat colored “border” (not actually a CSS border). Take a look in Firefox to see what I mean. It’s a shame, because the technique works very well in WebKit.
Anyway, check it out here.
Update (7/2/2010): I added a hack to “remove” the nasty borders in Firefox by introducing a negative margin on the inner gradient overlay. It stretches the overlay out to the edges of the button. It works, but I really don’t like it at all. I hope Firefox fixes their gradient rendering with border-radius to work “correctly”–or rather, what I feel is correct … like WebKit does it.
On a related note, Safari on the iPhone in iOS4 also renders the gradient overlays incorrectly. It leaves large gaps on the left and right. So, there’s something different about that version of WebKit as well.
I also added IE gradients, which don’t support color stops, so all the buttons will all appear to be straight two-color gradients. They still look decent, but not nearly as snazzy as in WebKit and FF.