A Better Button with CSS3

Firefox, Safari, Opera, and Chrome all support CSS3 tags. Unfortunately, Internet Explorer users will have to wait until IE9 is released to view CSS3 styles. For now, we'll have to limit our CSS3 to elegant flourishes that provide a better user experience in modern browsers while maintaining full functionality in all browsers.

With that in mind, CSS3 allows us to create a button that, I dare say, is a joy to click. Give it a try! (Link goes nowhere.)

Here we've got a button that appears to be recessed into the surface of the interface, with text that appears to be carved into the button itself. When clicked, the button appears to sink into the interface. These concepts are further demonstrated by imagining a cross-section of the button, viewed from the side:

Image a light source that originates directly above the user. The top of the button and the beveled edge below the button are highlighted, because light is hitting them more directly. The bottom of the button and the beveled edge above the button are both shaded darker, because less light is hitting them. A dark, one-pixel border is used to simulate the thin gap between the button and the rest of the interface.

When clicked, the top of the button is less highlighted, because some of the light that was hitting it before it was clicked is now being blocked by the top beveled edge. The beveled edges both are more distinct because more of those surfaces are revealed when the button is recessed. The height of the button is shrunk by one pixel to indicate that the button is moving farther away from the user. However, the beveled edges are not moving farther away, so we need to adjust their height to compensate.

Here's the CSS3 properties used in the button. Border-radius rounds the corners of the button. Text-shadow creates the shaded indent of the button text. Box-shadows are used to create both the light and dark bevel effects. Multiple shadows can be applied to a single element by separating the groups of properties with a comma.

-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;

text-shadow: 0 -2px #791c13;

-moz-box-shadow: 0 1px 1px #ddd, 0 -1px 1px #555;
-webkit-box-shadow: 0 1px 1px #ddd, 0 -1px 1px #555;
box-shadow: 0 1px 1px #ddd, 0 -1px 1px #555;

These are the styles applied when the button is clicked (the :active state):

margin-bottom: 1px;
height: 29px;
position: relative;
top: 1px;
color: #eee !important;

-moz-box-shadow: 0 1px 1px #eee, 0 -2px 1px #555;
-webkit-box-shadow: 0 1px 1px #eee, 0 -2px 1px #555;
box-shadow: 0 1px 1px #eee, 0 -2px 1px #555;

Relative positioning and a margin-bottom of 1px are used to compensate for the change in height from 30px to 29px. The text is darkened slightly to add to the illusion of the button being recessed.

Internet Explorer users will, unfortunately, miss out on these flourishes. They should see a button identical to the one below.

I shaded the button itself using a repeating background image rather than CSS3 gradients so that not all the resemblances to a button are lost when the CSS3 is not rendered.

James Childress is an interactive designer in the morning and an ExpressionEngine and CodeIgniter junkie in the afternoon. He enjoys wrassling with emerging web technologies whenever it's not a beautiful day outside, and sometimes when it is.