The iPhone’s smooth interactions can really spoil you. Even less-than-useful iPhone apps become addictive when they just feel satisfying to use.
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.
8:04 am
Nice post Darren, although I think it might be worth making a note about how CSS3 can handle the fading opacity as well.
webkit-transitionhas been available in Safari for quite some time, and withmoz-transitionnow picking up traction in Firefox, I personally wouldn’t use jQuery to handle animation unless it’s absolutely essential for browsers that don’t support thetransitionproperty.11:54 am
Thanks Elliot. Yeah, I wasn’t sure quite how hard to push the CSS3. I’d also considered throwing in
-webkit-gradienttoo for the background. The conversation actually began with adding jQuery effects to WP navigation and worked backward from there. Chris’s technique of a sliding image background (more like Snook’s) actually opens up a lot more doors for the effect. Unfortunately moz-transition doesn’t support either of these animations quite yet in the way I’m seeking, unless there’s something I’m missing?4:13 pm
Great example!
By changing the id=”testbutton” to class=”testbutton” and tweaking the references, IE 7 even comes up with an almost usable result…
9:54 am
Have to disagree with Elliott here as we all know which browser is the “browsers that don’t support the transition property.”
I think jquery is a great solution for providing these advanced CSS3 tricks cross-browser.
If between 70-80% of your users is never going to see an effect because you insist on using CSS3, then in the real world it’s pretty pointless.
Best of both worlds: CSS3 for those browsers that support it, fixing with a little jQuery for the elephant in the room :)
9:50 am
Hi Darren!
Really like your site.
How have you made this website?
Love and kisses,
Linda :)
9:12 am
Just a note – but there seems to be a slight delay on my machine – which becomes more apparent when you roll over the button a few times quickly.
- Also – the submit button at the bottom of this form is static :)
9:39 am
I like this blog a lot. Great info! Thanks a lot.
8:14 am
Good Post. It help me on designing the button.
Thanks
8:19 am
İ like your button design :) ty
1:52 pm
I like your button design. It’s beautiful. Love to use that in one of my blog.
Thanks
5:26 am
look nice. thanks your sharing.
3:30 pm
Very informative article.
Thanks for posting