Should buttons have cursor: pointer?

It is a design choice. Browsers give links the hand and buttons the arrow. Most web design systems add pointer to buttons for consistency, which is fine as long as disabled buttons drop it.

Why does my link not show a hand?

Something sets cursor on the link or a parent, often cursor: default from a reset or a framework. Inspect the link in your browser's developer tools and look for the cursor rule that wins.

Which Windows cursor does pointer use?

Link Select, stored in the Hand registry value. Visitors with a custom Windows scheme see their own hand.

cursor: pointer in CSS: what it shows and when to use it

cursor: pointer; Move your mouse over this box Cursors only appear with a mouse or trackpad. Open this page on a computer to see this one.

This is the cursor your browser and system draw for pointer.

What it shows

Windows draws Link Select (the Hand role, aero_link.cur): a hand with the index finger raised. macOS shows the Pointing hand. Browsers show it over links on their own; everywhere else you have to ask for it.

Usage

When to use it

Use it for

Custom clickable elements that are not links: cards, tabs, accordion headers, toggles and chips. Build them on a real button, then add pointer.
Buttons, if your design system wants them to match links. Most websites do this; native desktop apps traditionally do not.
label elements tied to checkboxes and radios, so the whole label reads as clickable.
Table or list rows when clicking anywhere on the row opens a detail view.

Avoid it for

Disabled controls. Switch to not-allowed or default so the hand does not promise a click that does nothing.
Text or areas that are not interactive, just because they have a hover effect.
As a stand-in for real semantics. A div with cursor: pointer is still invisible to keyboard and screen reader users.

Code

Copy the snippet

CSS

.buy-button { cursor: pointer; }
.buy-button:disabled { cursor: not-allowed; }

HTML

<button class="buy-button" type="button">Add to cart</button>

Support

Browsers and systems

Browser support for pointer
Browser	Support
Chrome	1
Edge	12
Firefox	1
Safari	1.2
Safari on iOS	no
Chrome on Android	18

The matching operating system cursor
System	Matching cursor
Windows role	Hand
Windows file	`aero_link.cur`
macOS	Pointing hand

Watch out

Gotchas

cursor is inherited, so pointer on a card spreads to all its text. Reset paragraphs to auto if people should be able to select them.
Disabled buttons keep the hand unless you change it: button:disabled { cursor: not-allowed; }.
Chrome swaps the hand for an I-beam while you drag to select text inside a link.
Very old Internet Explorer used a non-standard value called hand. You do not need it today.

Free cursors

A custom pointer cursor

The same cursor from each of our packs, free under CC0. Move your mouse over one to try it, or open it for the .cur file, the PNG and the CSS.

FAQ

Questions

Should buttons have cursor: pointer?: It is a design choice. Browsers give links the hand and buttons the arrow. Most web design systems add pointer to buttons for consistency, which is fine as long as disabled buttons drop it.
Why does my link not show a hand?: Something sets cursor on the link or a parent, often cursor: default from a reset or a framework. Inspect the link in your browser's developer tools and look for the cursor rule that wins.
Which Windows cursor does pointer use?: Link Select, stored in the Hand registry value. Visitors with a custom Windows scheme see their own hand.

More