In real life, whenever a user presses a button, they receive several types of feedback:

• haptic – they feel the button move
• visual – they see the button move
• aural – they hear the button click

This flow of information from the button to the user grounds the user and button in reality; because several types of feedback are involved, the user’s mind perceives that the button does exist in the real world, and thus has an easier time remembering where the button is and what it does ^[1].

On the web, when a user presses a button, they receive haptic feedback from their trackpad or touchscreen, and they ignore aural feedback because websites are usually soundless. But too frequently, users do not receive visual feedback from the websites they’re interacting with. With only one type of feedback, their minds may subconsciously decide that the buttons they click don’t actually exist, and may have a harder time remembering what those buttons do ^[2].

A button on the web provides visual feedback by entering two separate states, hover and active:

• hover
  • Occurs when the user’s cursor hovers over a button
  • When a button enters this state, it tells the user that it is clickable
  • Common characteristics include:
    • Lighter color
    • Darker color
    • Increased size
• active
  • Occurs when the user presses their mouse down on a button.
  • When a button enters this state, it tells the user that it has been clicked
  • Common characteristics include:
    • Decreased opacity
    • Darker color
    • Drop shadow (inset or outset)

Buttons can optionally also take on a third state called focus:

• focus
  • Occurs when the user presses the TAB key until a button is selected (and is thus important for users with limited use of their hands)
  • When a button enters this state, it tells the user that it is clickable, just like hover
  • Common characteristics include:
    • Dashed border
    • Outer glow

Below is an example button, showcasing all three states. The test below the button displays which state it is currently in:

In short, when creating a website, it is important to design not only the rest state of the button, but also its hover and active states. Without these states, buttons do not provide visual feedback to their users, and those users’ experiences with your website will be less substantial.

1. Maguire, E, et al. “Routes to remembering: the brains behind superior memory” Nature, 16 Dec. 2002.
2. Solnik, S, et al. “Effects of Visual Feedback and Memory on Unintentional Drifts in Performance during Finger-Pressing Tasks.” PubMed, 6 Feb. 2017.