Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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;
}
share|improve this question
add comment

6 Answers 6

up vote 20 down vote accepted

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.

share|improve this answer
2  
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 '11 at 4:12
    
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 '11 at 9:11
1  
@franz976: Average users probably won't notice the difference, actually. –  theazureshadow Sep 20 '11 at 2:11
6  
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 '12 at 10:57
8  
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 '12 at 21:40
show 3 more comments

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.

'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.'

(taken from a summary by Microsoft about pointers)

share|improve this answer
14  
Buttons probably have high affordance, but what's wrong with even greater affordance by using the hand pointer? –  JoJo Mar 3 '11 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 '11 at 17:51
add comment

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.

share|improve this answer
add comment

Both CSS 2.1 and CSS3 Basic UI specs definitely say that pointer cursor is exclusively for links. 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 (both existing and upcoming).

share|improve this answer
    
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 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 at 9:00
add comment

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.

share|improve this answer
    
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 '11 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 '11 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 '11 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 '11 at 19:36
1  
Most of Stackexchange's buttons have hand pointers too... –  JoJo Mar 3 '11 at 7:35
show 2 more comments

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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