Is the cursor on a button in the browser an arrow or a finger?

Question

Web development

I'm confused and can't decide. There is a button on the site - <input type=button value="..."> or <button>...</button>. Do I need to change the cursor to a hand with a finger (cursor: pointer;) when hovering the mouse over it? On the one hand, this is logical: the button is initially a real physical object, which is pressed by a no less real human finger, and not some kind of arrows. On the other hand, people are accustomed to pointing at links with a finger cursor (textual, graphical - it doesn’t matter, the main thing is that there is a transition to another address), and a button on the web is not necessarily a link. Well, by default in the OS (at least in Windows), the cursor on the buttons remains default, that is, the arrow.
As a result, we have logic on the side of the finger and mass habit on the side of the arrow. So what should be preferred? What other arguments are there?

Answer 1

It seems to me that the cursor should be turned into a finger over any element that can be clicked and get some kind of action. But if you use the standard view for buttons (default), then you can leave the arrow (default cursor).

Answer 2

The finger is more convenient, immediately makes it clear that everything is OK and you can press

Answer 3

Answer 4

cursor: pointer is more visual than changing the style of a button, for example, if images and styles are disabled, the pointer will let you know what the action will be when hovering over the name (nothing will happen with a normal cursor).

Google, Apple, Twitter use pointer

Answer 5

It is best not to change the cursor, but to make the button change in some way (highlighted, for example) when the cursor is placed over it.

Answer 6

If the reader is used to seeing a finger pointing up for hyperlinks, and an arrow pointing diagonally up and left for buttons, then you can try something in between for buttons: a finger, but pointing diagonally up and to the left. Here I drew it:

Here is the same finger with a double magnification for ease of viewing:

You can set an arbitrary shape of the cursor by loading it from a file in accordance with CSS 2.1 , which was recently (June 7, 2011) declared a standard (W3C Recommendation). This is done by specifying the url( ... ) value in the cursor property .

Answer 7

1. If the button is really a button - an arrow
2. If the link is underlined and a finger.
3. If the link is ajax, then dotted-underlined and a finger.
4. If the button is drawn, then it depends on how it was drawn. If it is very similar to a regular button or fancy CSS - an arrow. If the picture is on the floor of the "Register" screen or something like that - a finger.
For example, as on www.e-kontur.ru/ registration.

Answer 8

Finger ;)

Answer 9

What will the user think when the cursor over the button turns into a hand?
Thought 1: Computer glitched or hung.
Thought 2: If I click on the button, I will go to a third-party site.
…
Thought N: The creator of the site specifically thought that I would identify the button with a real physical object and the changed cursor would tell me that the button can be clicked.
PS Don't confuse users, they don't like it.

Answer 10

And one more opinion for the arrow. Most of all I don’t like the images of the finger above the links. Maybe because it takes up more space than the arrow, maybe a matter of habit. But on all Windows machines, I put a different cursor instead of a finger. Though here having thought understood that in KDE it so does not interfere.
That is, if you leave the arrow, then to a custom cursor loaded from a file.

Answer 11

Buttons in Google change the cursor to a finger (but their buttons look a bit unconventional).
Yandex leaves an arrow (standard button).
Vkontakte (non-standard button) - finger.
Odnoklassniki - standard button, arrow.
These 4 sites are visited by the majority of Internet users. Consequently, they are used to a simple rule:
- if the button is normal, we expect to see an arrow cursor
- if the button is "beautiful" - a finger.

Answer 12

There is such an idea:
If clicking on the button leads to the loading of a new page, then the “finger”. That is, similar to clicking on a regular hyperlink.
If clicking on the button leaves the visitor on the same page - "arrow". That is, similar to clicking on the "check-box".
For example, for "classic" web forms:
Button [Очистить]- "Arrow"
Button [Отправить]- "Finger"
As an exception to this rule, "links" underlined with a dotted line:
Despite the fact that they do not lead away from the page, the cursor is "finger".