Glass Buttons

Code - OmegaJunior.Net

When Apple released its MacOsX, the glass buttons proved one of most prominent visual elements of its user interface. This article shows one way of recreating that effect, in such a way that the amount of text on the button can have any length.

Updated 2009-04-05

With the onslaught of standards compliant web browsers, we've been able to simplify our Glass Button design. Should work in any modern browser, including but not limited to Opera, Firefox, Safari, Chrome, and yes, even Internet Explorer 8.

Resources

Check the source of this article to learn how the mark-up was marked up. Then check the glassbutton.css style sheet to check the layout.

This effect was created using CSS and a handful of small images. No javascript was harmed during the making of this article.

Sample Image

For those of you unfortunate enough to be forced to use a browser incapable of style sheets, or one created by a software vendor who thinks that internet recommendations should be ignored, here's an image to show what the glass buttons should look like.

Standards compliance:

[ Valid HTML 4.01 ]

[ Correct CSS ]