The perfect button

Designing the perfect button

First of all, there's no such thing as a "perfect button". There are only different variations of buttons. Some are generally more eye-pleasing, and some people tend to like a style that's not that popular. But generally speaking, there are some simple rules we can follow to make a button as good as it gets.

‍

Button Anatomy

If you have ever designed a website or an application, or at least tried to, you probably are familiar with the button anatomy.

Button Types

No matter what interface you are using, you will encounter buttons. Usually more than one type of such. Different button types help users to make the right decisions by communicating what's important and what is not.

‍

Colors

Today, there's rarely need to use plethora of different color buttons, especially on websites. Usually you are good to go with a primary, a secondary, and a tertiary (underline text) buttons but on some occasion you need a variation of a primary button for, let's say, colored backgrounds, depending on your brand identity rules. But when it comes down to an actual UI design, colors have a purpose. They give information to the user. For example, red tends to communicate that something went wrong.

Spacing

Button spacing on desktop apps & web is important. On mobile, it's crucial. According to a study made by Zhao Xia Jin, Tom Plocher, and Liana Kiff, too far away apart buttons made users touch the target on a much slower rate. Group them too closely together, and users have the lowest touch accuracy. Spacing items correctly can have a huge difference on the user experience.

Paddings & width

There's no exact rule. Depending on what Design System Library you are looking at, you'll get varying results on button paddings and widths. Below is my idea of an ideal button type that will give you a general direction.

‍

Button states

Buttons generally have 5 different states; Default, disabled, pressed, hover, and focused. These states communicate the current status of the button element. The bare minimum requirement is that the button changes it's state on a mouse-over (hover), to communicate that something is happening and the button is clickable. On this example hover state is communicated through contrast shift but there are other ways to communicate hovers - for example animating the text.