Update (9th July 2016): This article has been updated to include <button> tags rather than anchor tags to meet modern accessibility best practices. If you are working with buttons, always stick to the <button> tag.
Buttons are one of the most important components of any web page, and they have many different states and functions that all need to correctly match previous design decisions. In this article, we are going to cover three button design mindsets, alongside CSS code and tools to help new developers create their own buttons.
Before we dive into the various button mindsets, we need to reinforce a few of the basics of CSS buttons. Knowing the ideological difference between Flat UI and Material Design doesn’t matter if you do not know which CSS components change.
Let’s quickly have a refresher on the basics of CSS buttons.
The Basics of CSS Buttons
The definition of a good button is subjective to each website, but a few non-technical standards exist:
- Accessibility – This is paramount. Buttons should be easily accessible to people with disabilities and older browsers. The web’s openness is beautiful, don’t ruin it with lazy CSS.
- Simple text – Keep text within your buttons short and simple. Users should be able to immediately understand a button’s purpose and where it will take them.
Almost all buttons you see online will use some variation of color changes, translation times, and border and shadow changes. These can be leveraged using various CSS pseudo-classes. We will focus on two of these — :hover and :active. The :hover pseudo-class defines how CSS should change when your mouse hovers over an object. :active most commonly executes between the time a user presses the mouse button and releases it.
It is possible to change the entire display of a button with pseudo-classes, but that’s not a user-friendly approach. A good strategy for beginners is to add small or simple changes to button fundamentals while keeping the button familiar. The three main fundamentals of buttons are color, shadow and translation time.
Fundamental 1 — Color
This is the most common change. We can change the color of a variety of properties, the simplest of which are the color, background-color and border properties. Before we jump into examples, let’s first focus on how to choose button colors:
- <…….