At the Click of a Button

As you’ve noticed, buttons have become a part of our everyday lives. From the buttons on our cell phones, to the buttons on your mouse and keyboard, and even to buttons we click on a website, buttons help us navigate and move us closer to reaching out to a friend or completing an online transaction. What might not be as obvious is that all buttons share similar “states,” which provide feedback and let us know if our button push as been successful or unsuccessful.

When we push a button on a cell phone, for example, the button moves inward, or to a “down” state. Pushing the button triggers an action, such as displaying a letter in a text message. When the button is no longer being pushed, the button returns to its “normal,” unpressed state. We can tell if the button is being pushed by getting a feel for the current “state” of the button. As users, we are accustomed to how buttons behave, but as web developers, we must think about concrete button states in order to successfully carry button behavior over to the web.

All buttons, electronic or non-electronic, share three states: Normal (or Default), Over (or Hover), and Click/Push (or Active). Electronic buttons also have a Focus state. Below is a review of the four electronic button states, and how they relate to their non-electronic counterparts:

1. Normal or Default state – The state when no action is being taken on the button. The button is at “rest.”
2. Over or Hover state – On the Web, this is how the button reacts when the mouse is moved over the button. This state tells the user, “Yes, you are able to click me.” This is the non-electronic equivalent of running your finger over a button to get a sense of how the button “feels.”
3. Click/Push or Active state – How the button reacts and appears when the button is clicked. Usually, the button takes on a darkened or lightened appearance with an embossed outline, or switches to a reverse gradient pattern if the Default button state includes a gradient pattern. This is the same as pressing a button on your mobile phone.
4. Focus state – This occurs when the user tabs to the button with the keyboard, as opposed to navigating with the mouse. The Focus state shares its appearance with the “Hover” state.

As developers, we are accustomed to coding the Default and Hover states of our buttons, but not much attention is paid to the Active state. The Active state is essential for providing feedback to the user, as it tells him or her that the button has been clicked, and action is being taken. If no Active state is provided, users on slower connections, for example, may be left wondering if the button was actually clicked, since so “push of the button” response was given. Keep in mind that users are already familiar with this behavior, since operating system buttons typically account for all four states. For instance, move your mouse over and click the Start button on your Windows OS, and you will see the button change appearance according to the action taken on it.

The good news for developers is that these four states are not difficult to build, as each state can be developed through simple CSS. Below is a description of how to design and develop each state, using examples from a client website I recently developed.

1. Design for the “default,” “hover,” and “active” states. A good starting point is to design your “default” button, change the text color for the “hover” state, then lighten or darken the button’s background color or gradient for the “active” state.
2. Instead of placing your button as an image directly in your HTML, create a link with an id.
   

   <div class="button"><a href="services.jsp" id="services"><!--empty--></a></div>

3. Now in your CSS, assign a height and width for the link using the ID you assigned to the link. Assign a different background image for each of the three button states. Use the pseudo-class “:hover” for the mouse-over state, and the psuedo-class “:active” for the active state. I use the “outline:none” property to remove the dotted outline that surrounds the link when clicked in most browsers, but this is a matter of personal preference.
   

   #services{

    background: url(../images/services_btn.jpg) no-repeat top;

    display:block;

    height:41px;

    width:138px;

   }

   #services:active{

    background: url(../images/services_btn_active.jpg) no-repeat top;

    outline:none;

   }

   #services:hover{

    background: url(../images/services_btn_over.jpg) no-repeat top;

   }

4. You should also pre-load each button image using a traditional Javascript or newer CSS approach. This will prevent the button from disappearing and reappearing between state changes.

The bonus of using this method of switching button states is that it is also compatible with Internet Explorer 6 (IE6), since all actions are taken on links. IE6 is notorious for only allowing pseudo-classes to work on links, and not on divs or other HTML elements.

With just a little added effort, all online buttons can reflect the behavior of offline buttons. As buttons continue to grow in popularity and replace text links, more attention will need to be paid to how these buttons are used. While the design of a button may change, its behavior will not, and users will continue to count on the feedback from a button-click or push to know that their transaction is being processed, or that their comments are being submitted. If the user is satisfied, then our added time and efforts have been well spent.