UI cheat sheet: buttons
My favourite design element is the buttons. In fact, I [insert swear word of your choice] love buttons. In this cheat sheet, we will go through different types of buttons, states, and interactions. For the purpose of this story, we will be ignoring radio buttons, tabs, checkboxes, and other types of buttons — we will just be looking at ‘normal’ buttons.
What we will cover in this cheat sheet:
- Button actions
- Common button styles
- Button colours & styling
- Button states and feedback
- Button labelling
- Touch targets
- Button positions
- Button hall of fame
- Closing thoughts
1. Button actions
In this section, we will look at the hierarchy of buttons and the language that they communicate. Button actions are not determined by how they look (although users should be able to learn what the buttons mean by their styling), but rather by how they are used.
1. Call to action (CTA / C2A)
A call to action button, depending on the situation, will usually prompt users to sign up/register/buy now/etc. CTA buttons should be used where the platform wants to strongly…
