Web Interface  |  Buttons

Style

This section is about how to build a button style and how to make them in the same style.

01Uniform buttons

Unity of style is one of the basic rules of design. It is better to use the same border radius, the same shadow style, etc. on all buttons. Otherwise, the buttons look messy, sloppy and ruin the whole impression of the design.

Buttons have different border radius.
Unity of style with the same border radius.
Both buttons are rounded.
Both buttons have a shadow.

02Optical adjustment

If there is a caret icon to the right of the button label, it is better to reduce the right padding of the button. This works with vertical icons.

Visually, the padding on the right side looks too big.
It looks balanced with reduced padding on the right.

Square, round, and horizontally stretching icons usually don't require optical adjustments.

The rectangular icon creates too small an optical illusion and can be ignored.

03Destructive button

The destructive action should always be secondary and have less contrast than the primary action. This action does not need to be bright as it increases the risk of mistakes and accidental clicks.

Destructive action draws more attention to itself.
The destructive button style is quiet and draws less attention.

In fact, the destructive button does not even have to be red at all. Delete, cancel is always a secondary action. So it might be a more low-key and quieter button.

Save is the primary and Delete is secondary action. Accidental clicks will be minimized.

04Ghost button

The button must be shaped and look like a button. Even if this is a ghost button, it shouldn't really like a ghost.

The button does not look like a button. It's hard to say if it's even a link.
That's a real button. Its purpose is obvious.

Sometimes not all actions need to appear as buttons. That's okay. It's just important to try to make a link or button look like a clickable item.

"View cart" looks like just text. It is not obvious that it can be clicked.
"View cart" looks clickable.