Design Better Buttons

The do’s and don’ts of button design

Andrew Coyle
Jun 30 · 4 min read

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

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

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:

Follow NextUX | Find me on Twitter

NextUX

The future of iteration

Sign up for NextUX

By NextUX

Our latest articles on design and product development Take a look

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Andrew Coyle

Written by

Committed to helping others with design — Formerly @Google @Flexport @Intuit

NextUX

NextUX

https://nextuxdesign.com/

Andrew Coyle

Written by

Committed to helping others with design — Formerly @Google @Flexport @Intuit

NextUX

NextUX

https://nextuxdesign.com/

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store