Design Better Buttons

The do’s and don’ts of button design

Andrew Coyle
4 min readJun 30, 2020

This article illustrates better alternatives to bad button design practices to keep in mind when creating a user interface.

Limit one style per button type

All too often, websites and apps use multiple button styles for the same action type. Take inventory of how many buttons styles you use and pair it down to one style per type. Standard button types include: call to action (CTA), primary, secondary, tertiary, success, danger, link, etc.

Include event states and provide visual feedback

Button states like hover, pressed, and in-progress provide needed visual feedback to users. Without event states, users might get confused about what is or will happen upon committing an action.

Differentiate button types

Button types should be stylistically differentiated to provide visual cues of their hierarchy. A primary action should be more prominent than a secondary or tertiary action, and design actions that commit irreversible outcomes with extra intention.

Keep button styles consistent

Any design style can work as long as you keep the overall style consistent. If you use a 4px border-radius, subtle gradient and drop shadow, make sure you carry that style to all your button types.

Non-buttons shouldn’t look like buttons

Buttons (especially fully rounded ones) are often styled similarly to tags. If you use both components in your design, make sure to add enough visual difference to prevent confusion. The last thing you want to see is a user rage clicking an element they mistake for an action.

Keep case consistent

Whether you are using all caps, title case, sentence case, or lower case, make sure it is consistent across your different button types.

Know when to use icons

Buttons look bad stacked on top of each other like when presented in each row of a long table. Consider a more subtle visual style—like an icon—for actions in contexts with repeated content of the same kind.

Avoid long labels

Long button or link labels clutter a user interface and force a user to think. Limit an action label to only what is necessary unless the action is unique, complicated, or causes irreversible damage (ie. deleting data).

The label should clearly communicate its action

Don’t leave the user guessing what a button does, especially if it is irreversible. Explain the consequences of the action clearly and concisely. Labels like “yes,” “no,” and “cancel” can be misinterpreted. In the above example, a user could read “cancel” as a confirmation of canceling the location instead of canceling its deletion.

Add padding between links

Don’t overlook link actions. Make sure enough padding is added to them when they appear together outside of copy blocks.

Don’t wrap labels

The wrapping of button labels reduces legibility — it also looks terrible. Make sure to keep text to one line.

Accessibility first

A few basic things to consider:

  • Make sure every form field has a <label>
  • Use appropriate HTML semantics
  • Add role= and ARIA when necessary

For more on creating accessible forms:

It takes hours of research and attention to create content like this article. Please give it a few claps to motivate me to keep writing. It’s free for you but means a lot to me.

For more:

Find me on Twitter

--

--

Andrew Coyle

Formerly @Flexport @Google @Intuit @HeyHealthcare (YC S19)