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.


9 Answers 9


It's worth considering the historical order in which these things came into being.

Buttons existed from very early in the days of GUI computing. They had a shadowing effect to give a skeuomorphic impression of their being akin to physical buttons, which served to indicate they could be clicked much as one would push such a physical button. Indeed since you could be clicking a physical button on the mouse to do so (assuming you weren't tabbing on the keyboard to navigate), the skeuomorphism was backed up by that physical action.

When the cursor was over them they got the default cursor that indicated that while it may be possible to click or double-click whatever was under the cursor, they couldn't be typed in, and nor were they the dragging edge of a resizable object. Mostly the fact that they looked a bit like physical buttons sufficed to indicate that they were clickable.

When hypertext (of which the web isn't the first example, but was the killer app that brought it to a wide audience) emerged the clickable bits of text were indicated through underlining and (when colour was available) different colours to the non-linked text. It was still relatively weak as a physical signal so the hand-shaped cursor was invented as a further indication.

It was some time before <input> gave buttons when the type was submit or reset. Like the other types of <input> they were implemented through the mechanisms the OSs had for standard widgets and would have standard buttons. As the OSs put arrow cursors on such widgets, they had arrow cursors. That was fine as within the relatively limited range of features one could have in a web page at the time went, they were obviously buttons and obviously clickable. It would also be a bit weird to have anything other than normal OS behaviour at the time, since it would mean that web-browsers were acting strangely compared to other programs. If even many richly formatted applications (like games and some high-end office software which customised UI features beyond the OSs' standard) used arrows here, why wouldn't a relatively boring thing like a web page, which is just some black on grey text with some blue bits and maybe a few images floating to one side or the other?

When CSS made the presentation opportunities for web pages much richer (though they already had colour and font choices by now, albeit in horrid to code ways) buttons were still being rendered by calling into the OSs windowing system calls, so not affected by CSS. When CSS later made cursors one of the things that could be changed for an element, buttons weren't affected as they were outside of the scope of what CSS could change.

Browsers started drawing their own buttons so that CSS could change the appearance and also so they wouldn't "shine through" elements positioned "above" them in layered effects, but by now there was over a decade of the hand cursor being the normal cursor for a link and an arrow cursor being the normal cursor for a button. Even if one would argue now that buttons in browsers are no longer the same thing as buttons in other applications (which is a questionable argument still), consistency argues against such a change, particularly as the default; okay it would be technically easy to change it now, but it's technically easy for the page designer to change it now too, so why change the appearance of the pages of the people who haven't decided they want to change it?

  • 1
    Great answer, although I have to note that "buttons in other applications", particularly in "games" as mentioned further up, nowadays (and for quite a while) do, with a certain frequency, have special cursors, including hand-shaped ones. Commented Jun 24, 2019 at 13:56

Here's why:

Microsoft’s design guides talk about weak affordance:

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.

Apple’s Human Interface Guidelines states that the hand cursor should be used when “the content is a URL link”.

W3C User Interface guidelines says the same thing again with “The cursor is a pointer that indicates a link”.

From "Buttons shouldn’t have a hand cursor" by Adam Silver

  • 38
    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
    Commented Feb 16, 2017 at 13:13
  • 21
    Nowadays, button look a lot like text due to flat design paradigm so the affordance is not a relevant argument anymore. Commented Feb 16, 2017 at 14:02
  • 20
    @É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
    Commented Feb 16, 2017 at 15:28
  • 9
    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. Commented Feb 16, 2017 at 17:24
  • 11
    @8bittree: "Are you sure this site uses <button>s?" - That's irrelevant, this site is about UI, not HTML semantics. To the user, a button is a button. Commented Feb 17, 2017 at 3:35

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. Buttons are not meant to have the pointer cursor in the specification and probably that is the reason why Browsers don't assign it by default and we have to do it manually.

As to why would links need the pointer cursor, additionally to Dipak's answer, my understanding is that the specification considered it might not be obvious (in comparison with the surrounding text) that text links are links.

  • How's this any different from Dipak's answer?
    – Diego
    Commented Feb 16, 2017 at 12:19
  • 2
    @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
    Commented Feb 16, 2017 at 12:45
  • 7
    @Diego yes. This answer quotes an official source.
    – tjati
    Commented Feb 16, 2017 at 15:32
  • 4
    @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
    Commented Feb 16, 2017 at 22:23
  • 3
    This answer really gets to the heart of the question best. @Dipak's answer provides good information about why the default behavior should not be overridden. Alvaro, I would suggest editing this a little to drive home the point how that the default browser behaviors follows the official specification.
    – Tim Grant
    Commented Feb 17, 2017 at 14:24

I would just like to point out that, contrary to their guidelines, the submit feedback buttons on Apple's and Microsoft's websites both have a pointer cursor on hover. Both are input[type=submit] elements.

  • 2
    Or look at this site. Literally every button gives the cursor pointer on hover.
    – n8jadams
    Commented Dec 16, 2020 at 21:21

- Used for most objects. - Used for text links.

Example of a mouse pointer

Hover cursor change in the animated picture to the right is an example of a mouse cursor moving around the screen as a pointed arrow, over text as an I-beam cursor, and then hovering over a link as a hand pointer.

(source: computerhope.com)


Mouse arrow is destined for selecting of most objects (like button)

Hand pointer is destined for selecting an object or text links

  • 1
    But the default mouse arrow is also used in white-space areas (margins etc), in other words, when the cursor is over nothing. Does that make for a consistent UI?
    – Mr Lister
    Commented Feb 17, 2017 at 14:43
  • The demo would be better if it also showed a button with solid affordance.
    – Tim Grant
    Commented Feb 17, 2017 at 15:21

One of the main tenets of UX is "don't make me think" .... if you don't have a hand pointer over a button then you have to think "is this a button?" ... so you are breaking this main principle and making the UX worse.

This is probably why (as @tyletrotter says) Apple and Microsoft both use this on their websites.

  • I do not agree. You should think it is a button because it is (or it seems to be). If it is not a button, it's not your mistake and I as a designer I do not must fix others mistakes.
    – EliasNS
    Commented Feb 26, 2022 at 17:43

Actually this issue triggers me recently... So there's been said that the pointer is used ONLY when "the content indicates a URL link". As all the UI devs know, sometimes we use a button style/visual for a click event and sometimes we use it for a link. The user doesn't care if the final action is href="#gohome" or onclick="goHome()". For the user, every click represents an action.

IMHO this is a relic from those good ol' hypertext times when links were hyperlinks and buttons did 'Hello world' on a background of spinning skulls and mushroom clouds (I've been there man). All UI/UX designers arguing with an Adam Silver article may be nice but in a real situation, we can have two buttons of the same style - one triggering let's say a modal window, and one sending you to a different page. So by this theory they should both have a different cursor? Not saying that pages may be just sections with a different URLs or the same page in a different state or whatever...

Also in the sake of accessibility - changing the cursor clearly indicates that you might click the element and something might happen (my mom doesn't care what exactly/technically). Changing its color by adding 5% lightness is not sufficient. Even the WCAG requirement say that "focus/hover states for links must have a non-color designator" so why don't use the pointer?

I know that this is what the standard says, but may be the right time to change this view?

  • IMHO, you simple shouldn't use a button to link to other page. Buttons don't have pointer but people are adding it, so you could do the opposite, remove it in the "fake" buttons that are made with links. For me it's obvious that if I click a button something should happen, I don't need the pointer (as I do need it on links).
    – EliasNS
    Commented Feb 26, 2022 at 17:48

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!

  • 7
    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
    Commented Feb 16, 2017 at 23:31
  • @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
    Commented Feb 17, 2017 at 1:49
  • 3
    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
    Commented Feb 17, 2017 at 2:22

The simple rule I use is:

If it's a button but looks like a text link, give it a hand cursor.

Sometimes you want a button that look like a link as buttons are sometimes more convenient and semantic (e.g. don't need to fake a href like "#login-modal" and do event.preventDefault() if it's not going anywhere). Let's say you have a nav with: Home, About, Login.

Home and About are links which go to another page. However even though Login looks the same as them, it's actually a button which opens a login modal. It makes more semantic sense to be a button since it doesn't change the URL. In this case it make absolute sense that it has the same cursor as link.

Your Answer

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

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