Buttons with good user experience should not have hover state on mobile phones

1. The 3 states of Button on the PC side

On the PC side, if you want to implement a Button with a good user experience, you need to set at least the styles of 3 states:

• Normal

• Hover

• Active state

(of course, you can add other states as appropriate, such as Disabled state, Loading state)

Take ant design as an example to introduce the following three states:

normal

Hover state (the cursor hovers over the button)

This state, the usual design specification is: the element brightness is higher than normal.And the mouse is hand-shaped.(The purpose is to highlight the element the mouse is over and avoid clicking the wrong button)

Active state (the left button of the cursor is pressed and held down)

In this state, the usual design specification is: the element brightness is lower than normal.(The purpose is to feedback to the user that the element has been clicked, and the brightness contrasts with the Hover state, so that the user clearly knows which one I clicked)

2. Button does not need hover state on the mobile side

and on the mobile side, it usually does not need the hover state.

Why?

Because on touch screen devices, where you click, the "cursor" will be fixed there, and wherever you slide, the "cursor" will continue to be fixed there.

This will cause the Hover state to continue to trigger, but at this time the finger has left the device, and the cursor cannot be seen on the screen (most mobile users do not know that the mobile terminal also has a "cursor").”), so the user’s first reaction would be – your code has a bug.

Therefore, don't add Hover styles on mobile.

Notes on the mobile terminal

Because there is no hover state, on the mobile terminal, the active state must be sufficiently different from the normal state to create a "contrast" for users.

For example, in the cover image of this article, I developed the "Fighting Landlord" game, the Active state of the "Create Room" button is very different from the normal state, just to create "contrast".

Many mobile browsers set this default style in order to make the Active state more obvious:

-webkit-tap-highlight-color

div>

, will have a very bright semi-transparent filled rectangle when the user touches the interactive element.

If you want to maintain a unified interactive experience on each mobile browser, it is recommended to rewrite this style:

button:active {
-webkit-tap-highlight-color: rgba(0 0 0 / 0);
}


Then, on your own, make the active style more visible.

How to add Hover to PC, but not to mobile phone?

If your touch screen device is connected to an external keyboard, then it has a cursor. Since there is a cursor, the Hover state is required.

The question is, how do we know if the device has a cursor?Then we can add the Hover state to the cursor, and ignore the Hover state to the cursor.

The answer is:

any-hover

.

@media (any-hover: hover) {
button:hover {
background: yellow;
}
}


will only display hover state styles when the user has a cursor.

3. Pay attention to the style order

The hover style should be written first, and then the active style should be written.In this way, the style of the active state can override the style of the hover state.

4. Write it at the end

If you are like me and like code

pure

a little bit without redundant functions,You can write your own Button and encapsulate the components you need.

If you just use the component library directly to fulfill the needs of others, there is not much to worry about.Maybe the component library is very heavy and bulky, but consider comprehensive