Color And Voice: Apple OS X Lion Buttons in CSS | Improve your UI

Use OS X Lion to Improve Your UI

As you probably know, OS X Lion was released yesterday. While there are 250 some odd new features in Lion, what you probably notice first is the new interface design. Part of the new design is new icon buttons in apps like Mail, seen below. I'm going to recreate OS X Lion's buttons in CSS for use in your UI.

Download Files View Demo

The New Look

The new control bar in Mail. The colored, gel-like buttons have been replaced with smaller, monochrome buttons. The buttons have a slight background gradient while the icons have a dark inner shadow and a white drop shadow to give an inset feeling.

Lion Buttons in CSS

I want to use similar buttons in my app's user interface. I would like to add a single class to my links to indicate a button or an icon button: button or icon. I want to support grouping of buttons, so I can add a second class for that: left, middle, or right.

I used Glyphish's nice icon set to create my icon buttons. I simply numbered the buttons 1 to 200 and wrote a three-line script to spit out the CSS for each of the 200 buttons. To use an icon just add another class: iconX, where X is the icon number.

Buttons Demo

Button here Left Middle Right Label Label Label Label Label Label Label Label Label Label Label

And here is the complete set of icon buttons:

Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label/span>Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label

Follow us on twitter or signup to be notified by email when we publish new stuff like this.

Bonus GIF

Also new to Lion is the progress bar. Here's an an Apple-esque animated GIF that you can use while you load all those scripts.

Download Files

Support: Firefox, Chrome, Safari, IE7+, IE6 (via Fireworks PNG transparency fix)
License: Creative Commons CC-BY (give attribution if you want to)