Oklahoma City, Oklahoma

How to Design Buttons: 6 Guidelines for Perfect Buttons

If you want to design stellar buttons that look amazing, read on...

Jake Steelman
|
July 24, 2019
|
Tutorial

Buttons are a critical element with any interactive design.

Without them, your design isn't interactive. One of the critical functions of a button is to actually look like a button, so the user can distinguish it from the rest of your designs. Additionally, buttons should be elegant, clean, seamless, and consistent with the overall look and feel of your design.

Buttons even have an impact on your sales, for example, red buttons convert higher than green buttons. Even the text of your button affects your click-through-rate. We've outlined 6 guidelines for creating the perfect buttons.

Chart showing the emphasis and order of buttons for a user interface

1. Placement and Order

Placement and order are incredibly important with buttons, as it tells the user which buttons are more important. For example, a button that deletes someone's profile might be more important than a privacy policy link. Button styling and order are great ways to convey which actions are more important, or more emphasized, than others.

Button placement is incredibly important because incorrect placement could interrupt the user's flow. When placing buttons vertically (on top of each other) place the least emphasized buttons at the top and the most emphasized at the bottom. When placing buttons side to side (next to each other), begin with the most emphasized on the left side and least emphasized on the right.

Chart showing and labeling the different elements of a particular user interface button, including label, icon, and container.

2. Button Anatomy

Button anatomy is also a great thing to understand. A button consists of a label, a container, and an optional icon. While icons might help your CTR or give your user more context, they are not required for a functional or good looking button. Containers for labels can either be solid (have a fill) or have a border, with an optional drop shadow to add some depth.

Illustration showing the different priority levels of different sizes of user interface buttons

3. Button Size

Button size ties hand in hand with emphasis, however it highlights priority versus emphasis. Generally, larger buttons evoke a sense of urgency, and are typically the first to be looked at. In the context of a music app, the user might prioritize the 'Play' button over the 'Dislike' button, thus, the play button should be made larger than the dislike button.

Illustration showing many different colors of buttons and the moods they invoke

4. Color and Contrast

Color and contrast play a huge role in the mood or idea that your buttons invoke. For example, green tends to invoke success, prosperity, or security, while red tends to invoke warning, failure, aggression, or dominance. Here's a link to a site that goes much more in-depth with the different colors and what they mean. For the purposes of buttons though, these are the most common meanings of colors.

Illustration showing the different types of padding and spacing options for particular buttons

5. Width and Padding

Button padding is one of the most important aspects of button styling. My personal styling is to set vertical padding equal to font height, and set horizontal padding to 1.33 times vertical height. If a font height is 20px, vertical padding is 20px, and horizontal padding would be 27px. Button styling generally depends on the overall look and feel you are going for, as well as your own personal preferences. Buttons should be placed as far apart as one side of the horizontal padding, as depicted in the lower part of the graphic.

Graphic showing the various different states on buttons, including primary, hover, and clicked states

6. Button States

Finally, buttons need to have different styles for different states, so that the user can detect which state the button is actually in. Not shown in the graphic is the focused state and the disabled state. Typically, the hover state is a lighter color, clicked is a darker color or even lighter color, disabled is gray, and focused has an outline. However, it's very important for you to design your own style that the user can understand and interact with.

Key Takeaways:

Buttons are one of the most critical elements of user interface and user experience design (UI UX Design) because they allow the user to get context and make decisions. Styling and positioning these buttons is crucial, because it determines how exactly the user makes and prioritizes these decisions, and ultimately how the user interacts with your website or app.

Element Six Design is an Oklahoma City web design agency specializing in affordable web design services as well as graphic design and brand design services. Contact us today to schedule a call to discuss you company and how we can help you with a brand new website and SEO Services.

Like what you read? Share with your friends!