Buttons are one of the most common components in user interface design; almost every app and simple website uses them. Buttons help to guide the user’s actions for the main task on the screen — for example, buying a product or sending a form. In other words, buttons are something you’ll need to know how to design no matter where you land.
Although buttons can have different designs and styles, creating them requires some universal, basic guidelines. Designers developed and improved these guidelines over the years to establish a common language in button design, and thanks to these, anyone who interacts with buttons can easily understand how they work.
In this article, I want to focus on buttons and button statuses, which help users better understand their interactions with the buttons.
Before discussing the status of a button, let’s cover some basic knowledge about buttons in general. This will help us to go deep and understand button statuses after this.
The button is structured with different small elements that create it, among them:
In cases where an app is more complex (for example, an app that supports a mobile and desktop version), we will have to add more than one size for the buttons. Because of that, you’ll need to define the button sizes system to help you manage all your use cases.
A button’s height normally defines the sizes, which are between 32px and 56px height. If you use an eight grid, you can see the sizes in that way: 32px, 40px, 48px, 56px, etc.
But that’s not all. You’ll need to weigh a few more factors to choose the right button size for each platform. For example, applications that work on TV will require larger buttons, while apps on mobile platforms should have a minimum button size of 44 px.
This table can give you an idea of button sizes to aim for by device:
Naming them with clothes sizes, such as Small, Medium, Large, and Extra Large, will help other designers understand the different sizes:
In addition to button size, when creating a system of buttons for an interface, we’ll want to create different button types. Our application’s size determines how many types we need; for a landing page, one type may be sufficient, but three types may be required for a large app.
The button types help you create a hierarchy on the interface to differentiate the main actions a user can perform from less important, secondary actions.
Button states are a communication between the user and the interface to indicate different information about the button, such as whether the button is enabled or not. There are basic states and more advanced states.
The basic states include active, enabled, disabled, focused, and hovered — these are the essentials you can’t skip in your app. The more advanced states include loading indicators and success states, which are better for more advanced apps and improved UX.
This is the default state of a button; it is an interactive component state that shows the user that the button is clickable and they can click on it to perform a task such as submitting a form or paying for a product:
Once the mouse cursor hovers over a button, it enters a state known as the hover state. A change in the button’s appearance indicates this state to the user, which signifies that they can interact with it.
Typically, the button’s background color changes, though sometimes the border may change instead, depending on the button’s visual design:
Focused indicates that the user is above a UI element in the interface. This state is triggered when the user uses the keyboard.
By clicking on the tab button on desktop apps, the user can navigate through the interface; this is a common method for users who work a lot with the keyboard because it helps them to work faster.
The focused interaction on the screen is when the user sees a border on the button that indicates that the element is in a focus state. You can think of it as a hover state triggered by a keyboard instead of the mouse cursor:
When a button is disabled, the user cannot interact with it. If they try to click on the button, nothing will happen.
This state is triggered when certain conditions are not met, such as when the user still needs to fill in all the required input fields of a form. Until the user has provided all the necessary information, the form’s submit button will be disabled.
Disabled buttons are usually represented with a gray color to indicate that they cannot be used:
Active state (which can also be named pressed state) is a state that appears the moment the user clicks on the button. The button’s color changes at the moment of the click, or an effect on the button can appear.
Why indicate an active button? This lets users know their action had an effect. This can prevent rage clicks if your user doesn’t think their request went through.
For example, if your app uses skeuomorphic UI design, you can show the button pressed with a 3D effect:
The selected state is a unique case for a button group component (also known as a toggle button) and is normally used only for it.
A button group is a component that groups different options. When the user needs to choose from multiple options, this component allows them to select one option within a selected state.
The selected state represents the user’s selection within the grouping and is only applied when the user has selected.
A button can also include a loading state, like a small spinner appearing on the button after clicking to explain to the user that their request is in progress:
This can be a good idea to prevent upset users, especially if their request is going to take some time.
Using the success state, you can indicate the completion of a task, the successful submission of a form, or the successful purchase of a product.
Usually, a checkmark appears on a green button upon task completion, but the visual design can change — you could have confetti, a thumbs up, or something entirely different. This is good to pair with a microinteraction, or brief animation, so your user feels accomplished:
Designing button states is not complicated; it’s a UX designer’s bread and butter. Most of us can design a simple button quickly.
However, there are several factors to take into account to make buttons better, as outlined below, and this is where the nuance of button design comes into play.
When creating a button, it is always preferable to use text. But if you can’t add text because there is no space on the screen (for example, when the button is inside a table), you can use a button with only an icon.
To better communicate the information to the user about what the icon does, you can add a tooltip in the hover state that indicates what the icon does.
There is a debate about using the hover color for a button with a full background color; some think using a stronger or softer tone for the same color is better.
Another idea is to play with the opacity of the color, such as changing from 100 percent to 75 percent. I prefer to play with the color tone, not the opacity, because a color with opacity can merge with the color below the button. Hence, the designer has no control over the ultimate button color.
When we design states for buttons, we should distinguish between desktop and mobile platforms.
On mobile platforms, we do not need to use hover and focus states because users use their fingers on the touch screen; they do not use a mouse and keyboard, so there is no need for a hover state (when the user hovers above the button), and there is no need to use a focus state that is used when the user uses a keyboard.
Be sure to test your button with all the states in different browsers. Browsers are not 100% the same, and, in some cases, you will need to specify a custom CSS for a specific browser so it will look exactly the way you designed the button.
A button component is a component that has been used for many years in the UX industry; there is no need to reinvent the wheel here. Creating a simple design that effectively communicates with users who are familiar with this component is better.
For example, adding animations or transitions to the focus state or using multiple colors for the button is unnecessary. A simple design is best.
Some of these button states you’ll use in every app, universally. Others may only be when your app has gotten its feet off the ground. Either way, paying attention to button states is one of the many essential tasks for UX designers.
Optimizing your UI for clarity and accessibility will transform your app, so be sure to keep on top of the little things, even your buttons.
Header image source: IconScout
LogRocket lets you replay users' product experiences to visualize struggle, see issues affecting adoption, and combine qualitative and quantitative data so you can create amazing digital experiences.
See how design choices, interactions, and issues affect your users — get a demo of LogRocket today.
Subscription pages are meant for users and businesses, and they should work well for both parties. This blog is a thorough discussion of what’s best and what’s not when it comes to designing subscription pages.
Call it what it is. Product designers and UX designers have unique roles, even if their titles often get swapped. In this blog, know the difference and own your expertise.
Search bars are more than icons and inputs — they can be a retention magnet or a churn trigger. Sharing my tried-and-tested search bar design principles in this blog!
Are your colors clashing or cohesive? In this blog, I talk about clashing colors, their impact, and how you strike the perfect balance with colors in your designs.
Learn more →
