Level up — How to design better buttons

A macbook pro coding in CSS
Photo by Caspar Camille Rubin on Unsplash

Appearance and behaviour

What is a primary button?

What is a ghost button?

Button states

  1. Normal — how the button looks without the cursor being over the button and the page being linked to hasn’t been visited by the user before
  2. Hover — when the user’s cursor is hovering over the button, it gives an indication that they can click the button
  3. Active — when the button has been pressed and something is happening. This could be like a loading animation while saving a document or buying an item and waiting for the transaction to finish
  4. Focus — when you are pressing on or clicking down a button. It’s usually just a subtle change to the hover and normal state
  5. Visited — an indication that the user has visited this page before and should only be slightly different to the normal state
  6. Disabled — if the button can’t be clicked because something is missing on a form or the user doesn’t have permission then the disabled state should clearly show a state which isn’t clickable. This could be greying out the button and changing the cursor state. You could hide the button but I wouldn’t suggest doing this as the user may be looking for the button and wondering why there is no next step. (thanks to Sammy999IsHere on Reddit mentioning this )

Styling your button

The colour of your button

Example from Amazon UK website

The shape of your button

The size of your button

Content and microcopy

Limit yourself to just 1

Where should I place my button?

Summary

--

--

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
Michael Gearon

Michael Gearon

Senior Interaction Designer. Living in Cardiff, South Wales, interested in human psychology and behaviours. Writing all sorts of stories that interest me.