Web Interface  |  Buttons


This section is about how to make sure that the buttons are not fighting among themselves for the user's attention.

01Fighting for attention

It's not good when buttons fight for the user's attention with their brightness and contrast. The interface always has a primary and a secondary. Also with the buttons. It's better to separate the primary from the secondary, so that the secondary gets a little less attention.

The buttons compete with each other for the user's attention, although the Cancel action is secondary.
It is clear which button is more important.

When the buttons are the same color, but bright and contrasting to the whole interface, they still take too much attention. It is better to reduce their brightness or give them a lighter style.

Both buttons have too much contrast.
The user can find the main thing based on the meaning of what is written, not on the color. It's fast.

02Create the difference

Sometimes it is not easy to understand which button is the primary and which is the secondary. Both actions have value. In this case, one of the actions can be designed stylistically differently. For example, by making one of the buttons as a link.

The buttons compete with each other for the user's attention.
Differences in style, help to see the difference in meaning.

A good way to emphasize the main button is to add an icon for the button. This makes the primary button even more obvious.

Not bad, but it could be better.
The icon emphasizes what is important and helps the user make a decision faster.


A call-to-action button doesn't have to be a button. Especially if there are several CTA buttons on the page. They take up too much attention and the user subconsciously abstracts from them and stops noticing. A large, brightly colored link often works more effectively than a huge button, and it looks more aesthetically pleasing and balanced in the design.

CTA button as a button.
CTA button as a link.