Web Interface  |  Buttons

States

This section is about how to deal with the different states of the buttons.

01Disabled state

A button that has a colored background or border in the disabled state must get a gray background. Otherwise it will be visually seen as not disabled.

Color is a powerful tool to get attention, and even muted it creates the false impression that the button can be pressed.
Better. It is always clear that the button in the disabled state has a different style and is the same with all buttons in this state.

Same with outline and ghost buttons. Color is too powerful a tool and even with reduced transparency a colored button with disabled state doesn't look off.

The red outline button may not seem disabled.
Regardless of the type, the buttons have the same disabled style.

You don't need to complicate styles and make different tones for each disabled state on different backgrounds. A single style for all types of buttons with reduced transparency is enough. That way they'll look natural on any background.

Make buttons with disabled state have transparent backgrounds. Then they will work well on any background.

02Hover state

You don't need to change the color to a brighter shade for the hover state. The button should not change its appearance significantly, because the hover state is just an indication of an intermediate state and it doesn't need much emphasis.

It is better to make the color of the button a little darker and this will already be enough to indicate the hover state.

The colors are bright and contrasting when hovering.
The background is a little darker on the hover state.

With dark and black buttons you have to do the opposite. The color should be a little lighter on the hover state.

The dark button has a lighter background on hovering, while the white or transparent button has a slightly darker one.