82

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;
}
Improve this question
1
  • I upvoted your question and noticed that SO uses hand cursor for votes, "add comment" button and... it is easier to find out which element is interactive this way, so screw official guidelines I am switching to this style :-).
    – greenoldman
    Nov 5 at 16:02

8 Answers 8

Reset to default
42

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.

Improve this answer
9
  • 3
    If I were to use the hand pointer, would that increase or decrease usability? Personally, I prefer the hand pointer for consistency.
    – JoJo
    Feb 26, 2011 at 4:12
  • 1
    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.
    – franz976
    Feb 26, 2011 at 9:11
  • 2
    @franz976: Average users probably won't notice the difference, actually.
    – theazureshadow
    Sep 20, 2011 at 2:11
  • 7
    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.
    – Robin Winslow
    Jan 23, 2012 at 10:57
  • 9
    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."
    – KajMagnus
    Mar 9, 2012 at 21:40
38

It's all about Affordance. Buttons have a high affordance which visually suggest how they can be used. The hand pointer is used when affordance is lower to provide an indication of how to interact with that item.

Here's an extract from Microsoft's Windows desktop applications > Design > Guidelines > Interaction > Mouse and Pointers)

'Well-designed user interface (UI) objects are said to have affordance, which are visual and behavioral properties of an object that suggest how it is used.'

And:

Text and graphics links use a hand or "link select" pointer (a hand with the index finger pointing Screen shot of hand with index finger pointing ) because of their weak affordance. While links may have other visual clues to indicate that they are links (such as underlines and special placement), displaying the hand pointer on hover is the definitive indication of a link.

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.

Improve this answer
4
  • 20
    Buttons probably have high affordance, but what's wrong with even greater affordance by using the hand pointer?
    – JoJo
    Mar 3, 2011 at 7:34
  • I think the affordance comment makes some sense and have given a +1, but I also still say that an interaction should be designed consistently across a site, even if it's a slightly different convention.
    – jameswanless
    Mar 3, 2011 at 17:51
  • 1
    @JoJo I think it would send mixed messages: the hand is only for links (as a "link select" pointer) and nothing else. Its purpose is to supplement the poor affordance of a link, so Microsoft say to not dilute that message by also using it for something else (e.g. buttons).
    – ChrisW
    Jan 2, 2016 at 10:39
  • Interestingly, microsoft.com in opposition with themselves, using the following CSS: button:not(:disabled) { cursor: pointer; }
    – Matt Janssen
    Dec 5, 2022 at 10:25
13

Both CSS 2.1 and CSS Basic UI 3 specs definitely say that pointer cursor is specifically for links ('...a pointer that indicates a link'). One of the authors of the CSS 2.1 Test Suite wrote a following remark in W3C mailing list:

Even when hovering the cursor over an <img onclick="...some function...">, a push button, a radio button, a checkbox, the cursor under Windows does not change into a pointer but remains an arrow.

The pointer cursor is to indicate a link and not any/all clickable objects. It's because web authors abuse cursor declaration or misuse cursor declaration that there is a tendency to generalize or assume things (like a cursor revealing clickability) that the spec does not say.

So whether using cursor:pointer in other context than for links improves usability or not, it still violates the CSS standards.

Improve this answer
6
  • What about when a button performs the same functionality as a link (i.e. goes to a new page, perhaps with javascript) or when a link doesn't actually go to a new page and does something dynamic instead? I think many sites blur the lines between buttons and links, and the more important thing is to indicate to the user that a thing can be clicked.
    – Luke
    Feb 18, 2014 at 22:32
  • @Luke, I agree that this approach exists. But this is what the specifications say. Personally I believe that in good UI clickability of things should be obvious without cursor hints.
    – Ilya Streltsyn
    Feb 19, 2014 at 9:00
  • @IlyaStreltsyn CSS 2.1 spec explicitly doesn't say it's exclusively for links. It just states "[t]he cursor is a pointer that indicates a link" as a link's <a href="#"></a> default behavior. Just citing one person's opinion on the standard's discussion list doesn't make it a standard's statement.
    – Volker E.
    Oct 10, 2015 at 5:25
  • @VolkerE. but the spec doesn't say anything about 'default or non-default behavior' either, does it? It uses the word 'indicates', which I understand as 'helps to distinguish links and non-links'. There can be possibly a catch in the definition of what 'a link' is, but I can't find any example of a standard that defines a link as 'anything that can be clicked'.
    – Ilya Streltsyn
    Oct 19, 2015 at 9:32
  • Well, you've stated in your answer that "[t]he pointer cursor is to indicate a link" [accentuation by myself], which simply isn't in the spec. If you compare the examples below the other values, they are widely vague as well. It's just an example for what is meant by cursor: pointer, best exemplified by what kind of cursor is shown at a link. There is no exclusivity specified at all.
    – Volker E.
    Oct 25, 2015 at 6:04
11

Interestingly, hovering the submit button on this comment form changes the cursor to the hand. I would say "arrow=do and hand=go" was probably a convention at one point, but it's been widely discarded through a) ignorance to it and b) better design. Make a button look clickable and the cursor change won't matter to the end user.

Improve this answer
3

It's a little bit about psychology too. Changing the cursor too an arrow on mouseover indicates that the user is hovering on something that is actionable, but not necessarily an action that will take them somewhere else. That's different than a hand icon on mouseover, which on the web, indicates they can go somewhere.

Improve this answer
7
  • So any button that executes javascript and doesn't go to a new link should be an arrow? The hand pointer is exclusive for hyperlinks?
    – JoJo
    Feb 28, 2011 at 21:08
  • 4
    On the web, certainly from what I've seen in well over a decade doing this, the hand cursor is for hyperlinks. In general, the pointer is for actionable items that happen on page or reload the same page. I tend to think of it as arrow=do and hand=go. Of course you can easily change the cursor on a hover state with CSS, so it allows you to think of crosshairs, question marks (usually for definitions or acronyms) and many other possibilities.
    – jameswanless
    Feb 28, 2011 at 21:31
  • Here's a counterexample. Look at Facebook's account link. It activates the hand cursor, but it doesn't go to a new link. Rather it opens a menu on the same page.
    – JoJo
    Mar 1, 2011 at 6:24
  • I've been completely off Facebook for a while now, so can't look at it live, but I'd also say that Facebook breaks a lot of convention around meeting expectations. Do all the choices on the menu then go to other pages on Facebook? If so, you 'could' say that the flow is about going elsewhere, with an intermediary menu in the mix.
    – jameswanless
    Mar 1, 2011 at 19:36
  • 2
    Most of Stackexchange's buttons have hand pointers too...
    – JoJo
    Mar 3, 2011 at 7:35
1

Web Interfaces don't have any standardized elements as every OS does. Since the web Interfaces iCloud and Onedrive cursor varies form their desktop OS standards.

If you consider iCloud and Onedrive both are having their native and web Interfaces, In Native they use Default cursor on a button, while in the Web they use hand cursor on buttons.

enter image description here

enter image description here

Improve this answer
0

A button is, in a subtle way, different from a link. Whilst a link merely replaces the current page with another, a button - usually - submits some user input and, often, affects stored data somewhere. So a distinction is reasonable.

However, since I usually leave my buttons styled obviously as buttons, and links likewise, I'll often style the button's pointer to donate 'action' with the hand.

Improve this answer
0

While other answers talk about how hand pointer should not be used, I am realizing that most web buttons do have a hand pointer:

  • StackOverflow sets it on their buttons (in this very form).
  • Google sets it on their buttons (check front page).
  • Tailwind sets it in their preflight CSS reset.

So I think users are currently used for the hand pointer on buttons on the web.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.