Default cursor on mouse over of a button is not a hand pointer

  • Why is the default cursor an arrow when you hover over an HTML <button>? I always thought that arrows let you select stuff, but hands let you execute an action. Since buttons execute actions, shouldn't I override the default style to be a hand pointer?

    button cursor hand

    button {
     cursor: pointer;
  • franz976

    franz976 Correct answer

    10 years ago

    Buttons are a traditional desktop software UI control - a context where the hand pointer has never been used before the advent of internet.

    When web pages started to use the same control, they just kept the button as it was in a desktop environment.

    If I were to use the hand pointer, would that increase or decrease usability? Personally, I prefer the hand pointer for consistency.

    Consistency is also about user expectancies. And average users probably don't expect to find a pointer which is different from the one they are used to.

    But so many buttons on the internet are links with an image background, and even those that aren't pretty commonly do have cursor:pointer (check the Add Comment button for an example) What are users used to at this point?

    @franz976: Average users probably won't notice the difference, actually.

    I would also like an answer to which is more usable. Most UI tweaks are pretty subliminal - users don't notice explicitly. But they make a difference. For example, in the question above I might think the button images in the question were actual buttons, but be alerted to the face that they're not because of the cursor. I noticed buttons on StackExchange sites have `cursor: pointer`.

    Here is an excerpt from Microsoft's guidelines for *Windows-based applications*: *"To avoid confusion, it is imperative not to use the hand pointer for other purposes. For example, command buttons already have a strong affordance, so they don't need a hand pointer. The hand pointer must mean "this target is a link" and nothing else."*

    Personally I also add cursors to buttons or anything that can be directly interacted with for that matter. I don't think that users will be confused/disoriented if you use the hand cursor instead of the default, if anything it will be more helpful.

    Sometimes links are styled as buttons to show that they represent an action, even if they're implemented as HTML links. Should link-buttons be explicitly `cursor: default` to match `

    This is complete and total BS. Buttons with cursor happened before the Internet.

License under CC-BY-SA with attribution

Content dated before 7/24/2021 11:53 AM