The iPhone user controls are responsive, like tactile objects in your hand. The panels slide and the icons glow when you touch them. It gives the illusion of tighter control over the app. Subtleties in the UI keep users coming back, even if they don’t know why.

Switching to a touchscreen-less web browser, interactions feel stiff and unsatisfying. Clicking Amazon.com‘s “Cart” button is like throwing yourself against a brick wall. It doesn’t budge. It doesn’t light up or depress or change colors. It’s unsatisfying and subconsciously makes the site feel less accessible. The less responsive the interface, the less likely you are to explore it, potentially.

Button Behavior

Adding subtle interactions can be very easy, yet it’s commonly neglected. Campaign Monitor is one of the more beautiful and thorough sites out there, but the 2 biggest calls-to-action on the homepage were designed as big rounded buttons that don’t behave like big rounded buttons. Lack of response creates a feeling of distance been the user and the interface.

Simple behaviors like this…

…make me feel more encouraged to interact with the site.

The button now has distinct :hover and :active states so it depresses when clicked. Notice the text also bumps down 1 pixel and the text-shadow changes to give it a 2-dimensional feel. Now that CSS3 is gaining wider support, most of this styling and behavior can be done easily.

Building the Button

Campaign Monitor uses one big PNG for their button, but the following method (Safari 4+, Firefox 3.5+) is easier to build and more scalable.

The CSS looks like this:

a#testbutton, a#testbutton:visited {
display:block;
background: url(http://darrenhoyt.com/imagedump/simple_button.png) repeat-x;
width: 200px;
padding:10px 0;
text-align:center;
border:1px solid #608925;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.8);
font-weight:bold;
text-transform:uppercase;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
color:#FFF;
text-decoration: none;
opacity:.85;
}

a#testbutton:hover {
border-color:#49671d;
}

a#testbutton:active {
background-position:  0 -200px;
padding:11px 0 9px;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
}

And the only HTML required is:

Find Out More

There is nothing revolutionary about an enhanced button, but subtleties make a difference. Look at the “You Had Me At Hello” button over at Nosotros HQ or consider 37signals’s “Yellow Fade” technique or MetaLab’s picker menu. The minor UI enhancements feel less abrupt, more approachable and more “live”.

(BTW, if you’re a real purist, you might even say a button isn’t the right element here anyway; a true button should process a form, not simply link to something. But that’s a discussion for another post.)

Animating the Button

But CSS can’t do it all. You’ll also notice there’s a bit of javascript on the button to fade the opacity in and out (full demo here). All it required was loading jQuery and another smaller script:

Again dead simple, but worth doing.

If fading opacity isn’t what you want, Chris Coyier and I started a discussion that resulted in a rewrite of his previous tutorial “Color Fading Menu with jQuery”. The newest demo can be seen here and uses a slide approach rather than a fade.

Better Navigation

Chris and I also discussed how to integrate these techniques with WordPress navigation like <php wp_list_pages(); ?>. Go check out his tutorial over at Digging Into WordPress.