Example Glass Buttons - Pure CSS - ΩJr. Software Articles and Products

This information lives on a web page hosted at the following web address: 'https://omegajunior.globat.com/code/'.

A.E.Veltstra
2009

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, with the benefit that the amount of text on the button can have any length.

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


Sample Image


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.


Live Sample:

Need problem solving?

Talk to me. Let's meet for coffee or over lunch. Mail me at “omegajunior at protonmail dot com”.