Hand Cursor on Buttons
Regular buttons don't need a hand
A regular-shaped button does not have the weak affordance issues of text and graphic links. Buttons also do not have any special mouse operations on right-click. These factors explain why the HTML button element was not given any special mouse cursor; it has strong affordance of interactivity on hover and at rest and therefore uses the default system cursor (in the same way as checkbox, radio, details & select).
Affordance of Hover
The edges, or boundaries, of text links and graphics links are not well defined. With the default system pointer it can be unclear when the mouse cursor is registering with the hitbox of the element. The change in style of cursor increases affordance of the interactive hover state.
Affordance at Rest
The understanding of whether something is a button or not should not depend on the hover interaction, it should be discernible from the rest state. It shouldn't rely on user discovery or guesswork. Not all users are pointer device users so the principle should be easily translated to any screen.
Mouse Cursor Styling
Mouse cursor styling provides affordance of any non-default mouse operations available on an element (e.g. text selection, activating help or context menus, copying content, resizing tables).
Fake Buttons
The elephant in the room is of course links that are styled to look like buttons, aka fake buttons. Our recommendation is to retain the elements default hand cursor - as it reveals the elements true behaviour and its additional functionality (e.g. right-click actions).
Summary
Buttons do not need a hand cursor
All text and graphic links should have a hand cursor
We recommend keeping the browser's default hand cursor on links that are styled to look like buttons
Further Reading
Last updated