Cursor choice for buttons

[ezzatron]

Hey 👋

I noticed recently that Open Props' normalize.css sets the cursor for buttons to pointer and it got me thinking. This probably seems like a perfectly logical choice to many people, but I've come across some good arguments against the idea. Adam Silver's article "Buttons shouldn't have a hand cursor" is a good starting point. But it boils down to:

• Well-designed buttons look clickable without the need for an additional signifier like the hand cursor.
• Links need the hand cursor signifier because their affordances are not as obvious.
• Operating systems and browsers tend to make this distinction.
• Buttons and links are distinct things, and having them interact differently is generally a desirable thing.

To lend some weight to the argument, the W3C specifically defines the purpose of the cursor pointer as:

pointer
The cursor is a pointer that indicates a link.

Microsoft also has a lot to say on the subject:

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.

Apple has similar opinions:

Pointing hand
The content beneath the pointer is a URL link to a webpage, document, or other item.

This also relates to the distinction between buttons and links in general, which is a whole other thing; but I did notice that Open Props' buttons.css module is also conspicuously lacking a way to style links as buttons. A lot of CSS frameworks would give you that, but it seemed to me like Open Props was subtly trying to encourage me to avoid styling links like buttons, and to keep them as distinct concepts. If that's the case, then I think it makes sense to further differentiate them via cursor choice too.

All of that being said, there are obviously lots of design systems and CSS frameworks out there that don't abide by these cursor rules at all. A lot of people just assume that a hand cursor means "clickable", and then those people go on to write systems that use the hand cursor for buttons, proliferating the same assumption in others.

In any case, it's a topic I find weirdly fascinating. I'd love to hear other opinions, especially from folks with way more UX experience than I have 😄

[argyleink]

nice, all healthy considerations! Apple and MS and others have clearly shared what they think is right. i find it less black and white than links vs other interactive stuff. i dont think normal users understand the distinction between links getting the hand and other stuff not.

i def lean more towards using cursor pointer consistently for mouse interactive elements. takes the guess and check out of it for users, just like a focus ring. i also like to offer keyboard focus styles for things that get cursor pointer.

the open props normalize and button file does make it super easy to overwrite, just target buttons and set the cursor style you like. no battles 👍🏻

and yeah, for links styled like buttons, I personally dont like to do that, but it's clear other folks don't mind (#310). there's an open feature request for the button stylesheet to offer a classname that can be placed on a link tag.

but yeah, all in all, a normalize is an opinionated file. fun thing about wrapping it all in :where() is anything you disagree with, is just a one liner to fix. i appreciate you reaching out and sharing this tho!

[ezzatron]

Thanks @argyleink! It's really cool to be able to understand the reasons behind these design choices a bit more deeply. At work, we're just dipping our toes into our first design system (based on Open Props). We're trying out including normalize.css for now, and I like being able to leave little comments on our overrides explaining the reasons why we're deviating from its choices.

My gut tells me you're probably right about most users not understanding the distinction in most cases. But I so still think there's something to the concept that "buttons perform an action, links take you somewhere else". You can frustrate users by having something that looks like a button cause a navigation they weren't expecting, for example. Then login buttons come along and ruin your day by kind of... doing both 😂