current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top
up vote 18 down vote favorite
1

A friend was asking me why <button> HTML elements don't have a CSS cursor pointer by default?

It is the default behavior for links, and can be achieved on a button with

button { cursor:pointer; }

Still, why this difference? Sources are a plus.

share|improve this question
up vote 25 down vote

Here's why:

Text and graphics links use a hand [...] pointer [...] 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.

https://medium.com/simple-human/buttons-shouldnt-have-a-hand-cursor-b11e99ca374b#.b33l7fivt

share|improve this answer
12  
Huh, that is pretty surprising to me I've always used hand pointers on pretty much anything clickable. I honestly don't see the benefit of making it only for links either, sure they need it to give them affordance but why should you detract from buttons. – DasBeasto 17 hours ago
4  
Nowadays, button look a lot like text due to flat design paradigm so the affordance is not a relevant argument anymore. – Édouard Lopez 16 hours ago
7  
@ÉdouardLopez Not quite. Unless your design is broken, there's still plenty of affordance even on flat buttons - for example, when you hover a mouse over them, they change background colour, add a border, expand... The original affordance a button provides was lost, but replaced with a different one. And since pointers became associated with links in particular, people expect them to open a browser, have a URL you can copy, open in a new tab in the browser, be safe (after all, links are supposed to be non-destructive), that kind of thing. – Luaan 15 hours ago
2  
I don't agree with your snippet. The buttons on this very site use the hand-pointer, and I would consider it a design-mistake if they didn't. – BlueRaja - Danny Pflughoeft 13 hours ago
2  
@BlueRaja-DannyPflughoeft to be fair though the StackExchange site itself isn't the best example of design, I mean it's not even responsive.. But I do stand by that all buttons including this site's should use pointers. – DasBeasto 11 hours ago
up vote 13 down vote

According to W3C cursor:

pointer The cursor is a pointer that indicates a link.

The specification only indicates that links are meant to have the pointer cursor.

As to why would links need the pointer cursor, additionally to Dipak's answer, my understanding is that it might not be obvious that they are clickable, so there is a need to indicate it.

share|improve this answer
    
How's this any different from Dipak's answer? – Diego 18 hours ago
1  
@Diego I think there are two questions: Why the HTML button element doesn't have the pointer predefined? Because the specification only indicates links. Why would only links need the pointer? I agree Dipak already commented on it, Ill edit to indicate it or should I remove the answer? – Alvaro 17 hours ago
4  
@Diego yes. This answer quotes an official source. – tjati 15 hours ago
    
<button> is not a link. This does not answer the question. – Rob 8 hours ago
3  
@Rob This does not state that <button> is a link. It states that the behavior in question is intended for <link>s and thus, by extension, not intended for <button>s, because they are not <link>s. – 8bittree 8 hours ago
up vote 0 down vote

First, <button> is not a link so any answers ascribing to what happens when you hover over a link don't apply. Second, CSS is a separate, independent specification from HTML. One does not specify what the other should do. It is the browser vendor that decides what CSS is provided for any actions in many cases though they tend to stick to the same thing if it's not in the specification.

It's been a long time since I've read this part of the spec and I'd have to review it for what is there but I'm pretty sure there is an indication nothing is to happen in this case because a button should be a button and if it's not a button it should be something else!

share|improve this answer
5  
Actually, links are very applicable here, because the specific behavior in question is supposed to be exclusive to links, according to Microsoft's design guide, Apple's design guide, and the W3 user interface guide. Since <button>s, as you point out, are not links, they should not default to having a behavior that only links are supposed to have. – 8bittree 7 hours ago
    
@8bittree The question is asking about button behavior which is what I am addressing. Everyone else is addressing link behavior so they don't answer the question. – Rob 4 hours ago
1  
I'm really having trouble understanding how "it is imperative not to use the hand pointer for other purposes. For example, command buttons already have strong affordance, so they don't need a hand pointer. The hand pointer must mean 'this target is a link' and nothing else" fails to answer the question. That even seems to agree with your statement that "a button should be a button". – 8bittree 4 hours ago

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.