Gorgeous CSS3 buttons inspired by Aqua

The two cornerstones of the Web as an interactive medium are the form, which facilitates the submission and retrieval of data, and the hyperlink, which facilitates navigation.

Since form submission buttons and hyperlinks do different things, it makes sense that browsers display them differently (by default).

Default appearance of buttons and hyperlinks in Safari on Mac OS X

Web applications, however, sometimes blur the line between doing things and going places; visually distinguishing links from buttons, therefore, is not always appropriate. As Stephen Anderson explains in his article In Defense of Eye Candy on A List Apart, an element's appearance should suggest appropriate modes of interaction.

In WordPress's Publish pane "Save Draft" is a submit input, "Preview" is a link; both are styled as buttons

Styling links to look like buttons

Beware! There's quite a bit involved in styling form elements – be sure that there's a compelling reason to override default browser styling before doing so.

An unstyled submit input and an unstyled hyperlink are displayed below. One must declare a number of rules in order to have the two elements rendered in the same way.

Unstyled submit input and hyperlink

border: 1px solid #850; color: #850;

background: #fc6; text-decoration: none;

padding: 0.25em 0.5em; font: bold 12px/15px "Lucida Grande", "Lucida Sans Unicode", sans-serif;

Progressive enhancement

The submit input and the link now look the same, and somewhat button-like. Even antiquated browsers such as Internet Explorer 6 understand the rules defined thus far. The next step is to make the elements more appealing and more button-like in modern browsers.

-webkit-border-radius: 1em;
-moz-border-radius: 1em;
border-radius: 1em;

Rounded corners

background: -webkit-gradient(linear, left top, left bottom,
    from(#fc6), to(#fc6),
    color-stop(0.1, #fff), color-stop(0.2, #fc6),
    color-stop(0.5, #fc6), color-stop(0.5, #fa2));
background: -moz-linear-gradient(-90deg,
    #fc6 5%, #fff 15%, #fc6 25%, #fc6 50%, #fa2 50%, #fc6);

Linear gradient with colour stops creates a sense of depth

Styling different states

It is important to consider the different states a button may have. Apple's Aqua GUI provides three different effects, any or all of which may be applied to a button: a pulsating blue background indicates that return activates the button; a button with an outer glow can be activated via the space bar; and a static blue background is used for a button's "active" state (which occurs while the button is being clicked).

In Aqua, return activates the blue button; space bar activates the button with the outer glow

On the web, submit inputs and hyperlinks have several possible states, the most important of which are hover, focus, and active. When creating style rules for each of these states it's important to bear in mind that more than one state may apply at one time.

Here the OK button exhibits both a pulsating blue background and an outer glow

Hover

border-color: #740;
background: #fb4;
background: -webkit-gradient(linear, left top, left bottom,
    from(#fb4), to(#fb4),
    color-stop(0.1, #fea), color-stop(0.2, #fb4),
    color-stop(0.5, #fb4), color-stop(0.5, #f90));
background: -moz-linear-gradient(-90deg,
    #fb4 5%, #fea 15%, #fb4 25%, #fb4 50%, #f90 50%, #fb4);
color: #740;
cursor: pointer;

Hover state (right) alongside default state

Focus

-webkit-box-shadow: #740 0 1px 0.75em;
-moz-box-shadow: #740 0 1px 0.75em;
color: #740;
outline: none;

Focus state (right) alongside default state

The focus and hover states play nicely together

Active

border-color: #630;
background: #f90;
background: -webkit-gradient(linear, left top, left bottom,
    from(#f90), to(#f90),
    color-stop(0.1, #fd8), color-stop(0.3, #fb4),
    color-stop(0.5, #fb4), color-stop(0.5, #f90));
background: -moz-linear-gradient(-90deg,
    #f90 5%, #fd8 15%, #fb4 35%, #fb4 50%, #f90 50%, #f90);
color: #630;

Active state (right) alongside default state

Demo

Interact with the finished styled button on the Hyperlinks as buttons demo page.

Respond