Better Button and Nav Interactions

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.

46 Responses {+}

Trackbacks

  1. Integrating Fading Button Navigation | Digging into WordPress
  2. 25 Beautiful Blog Comment Designs | Vandelay Design Blog
  3. 25 Beautiful Blog Comment Designs | JKookServ Hosting Blog
  4. Professional web designers and web 2.0 experts » Blog Archive » 25 Beautiful Blog Comment Designs
  5. 25 Beautiful Blog Comment Designs | iDESIGN
  6. 25个漂亮的博客评论设计 - 菠菜博
  7. WEB前端设计资源分享 | OK! » Blog Archive » 25个特色的博客评论设计
  8. 25个日志评论列表样式设计 « Lx实验室
  9. 20 CSS3 Tutorials and Techiques for Creating Buttons - Speckyboy Design Magazine
  10. 20 CSS3 Tutorials and Techiques for Creating Buttons « qeqnes | Designing. jQuery, Ajax, PHP, MySQL and Templates
  11. 20 + CSS3 Tutorials and Techiques for Creating Buttons | Seventy Seven magazine
  12. 20 CSS3 Tutorials and Techiques for Creating Buttons | The New Drop
  13. 40+ Excellent Comment Designs For Design Inspiration
  14. More than 45 Beautiful Comment Designs, Must See! | Information to Web design, Great Graphics Design, Web design portofolio, Web design Tutorial, online bussinesses web design bussiness, Articles about graphics website for internet online bussiness |web d
  15. 25个特色的博客评论设计 - IETester
  16. 25个特色的博客评论设计 - 作品欣赏 - 博客 评论 - 代码世界
  17. 10 CSS3 Tutorials & Techniques for creating buttons. « The Creative Project
  18. 17 CSS3 Button Styling tutorials and Techniques - Wsblogz.com – Web design magazine
  19. http://www.darrenhoyt.com/2009… | Teknik Servis, Ara, Türkiyenin Teknik Servis Platformu
  20. Identi.ca Updates for 2010-06-05 | Teknik Servis, Ara, Türkiyenin Teknik Servis Platformu
  21. Complete Toolbox: 55 CSS Menu And Button Coding Tutorials » abdie.web.id
  22. Complete Toolbox: 55 CSS Menu And Button Coding Tutorials | CG Stream
  23. Complete Toolbox: 55 CSS Menu And Button Coding Tutorials
  24. Complete Toolbox: 55 CSS Menu And Button Coding Tutorials | TechFleck
  25. 55 CSS Menu And Button Coding Tutorials « FED视野
  26. 25 CSS3 Button Tutorials and Techniques | blogfreakz.com
  27. 25个博客网站的评论功能设计 | 第一站长站
  28. Call to Action Button | Netclosing
  29. CSS3 Buttons « SoftPalace
  30. CSS3 Buttons – 10+ Awesome Ready-To-Use Solutions (+All Related Tutorials You Need) | JCODING
  31. CSS3的按钮10+ Awesome Ready-To-Use Solutions | WebCooky
  32. CSS button, 110 best!
  33. Selección de botones CSS | La Isla Buscada
  34. Most Hot Latest CSS And CSS3 Buttons, 110 Best Of The Best Sets !