The cursor property sets which mouse cursor icon displays when hovering over an element, providing a visual hint about what interaction is available or currently happening.

Syntax

cursor: pointer | default | text | move | not-allowed | wait | grab | ...;

Deep Dive Course

pointer displays the familiar hand-with-pointing-finger icon, conventionally signaling a clickable element like a link or button; default shows the standard arrow cursor; not-allowed displays a cursor indicating an action is currently unavailable, commonly paired with a disabled-looking element; and many other specific keywords exist for more particular interactions, like text for editable text areas, move for draggable elements, and grab/grabbing for elements that can be dragged. Setting cursor: pointer on a non-interactive element that doesn't actually respond to a click is a common, subtly misleading UX mistake, since it visually signals clickability that doesn't actually exist.

1Understanding Cursor

💡

Only set cursor: pointer on elements that genuinely respond to a click — applying it to a purely decorative or non-interactive element visually signals clickability that isn't actually there, misleading users about what they can interact with.

editor.html

button, a, [role="button"] {
  cursor: pointer;
}

localhost:3000

2Practical Example

Here is a real-world application of Cursor showing how it is used in production CSS code.

editor.html

.disabled-button {
  cursor: not-allowed;
  opacity: 0.5;
}

localhost:3000

3Best Practices

Follow these guidelines when working with Cursor:

1. Reserve cursor: pointer specifically for elements that genuinely trigger some action on click, keeping the cursor an honest, reliable visual signal of actual interactivity

2. Use cursor: not-allowed on a visually disabled-looking element to reinforce, through the cursor itself, that the action currently isn't available

3. Use more specific cursor values, like grab, move, or text, when they more precisely match the specific kind of interaction actually available on a particular element

⚠️

Tip: Only set cursor: pointer on elements that genuinely respond to a click — applying it to a purely decorative or non-interactive element visually signals clickability that isn't actually there, misleading users about what they can interact with.

editor.html

button, a, [role="button"] {
  cursor: pointer;
}

localhost:3000

Examples

Example 01Basic Usage

button, a, [role="button"] {
  cursor: pointer;
}

Example 02Advanced Example

.disabled-button {
  cursor: not-allowed;
  opacity: 0.5;
}

Best Practices

Reserve cursor: pointer specifically for elements that genuinely trigger some action on click, keeping the cursor an honest, reliable visual signal of actual interactivity
Use cursor: not-allowed on a visually disabled-looking element to reinforce, through the cursor itself, that the action currently isn't available
Use more specific cursor values, like grab, move, or text, when they more precisely match the specific kind of interaction actually available on a particular element

Interview Question

Why is setting cursor: pointer on an element that doesn't actually respond to a click considered a UX mistake, rather than a harmless stylistic choice?▼

Hint: Think about what a pointer cursor has become a widely-understood, conventional visual signal for, across virtually the entire web, and what happens when that convention is violated.

Over decades of consistent web usage, the pointer, hand-shaped cursor has become an extremely widely-recognized, near-universal visual convention specifically signaling that the element currently being hovered is clickable and will trigger some action or navigation, to the point where most users respond to it almost automatically and unconsciously, without needing to consciously think about what it means. When cursor: pointer is applied to an element that doesn't actually do anything when clicked, a purely decorative label or a static piece of text, for instance, it directly violates this deeply ingrained convention, actively misleading users into believing an interaction is available where none actually exists, which can lead to confusion, frustrated repeated clicking, or a general erosion of trust in the reliability of that specific cursor signal on that particular website going forward. This is exactly why cursor: pointer should be treated as a meaningful, honest signal of genuine interactivity, applied deliberately and only where an actual click handler or navigation genuinely exists, rather than as a purely decorative stylistic flourish applied without regard for whether it accurately reflects the element's real behavior.

Exercises

MediumPractice using Cursor in a real scenario.

View Solution

button, a, [role="button"] {
  cursor: pointer;
}

Frequently Asked Questions

Why is setting cursor: pointer on an element that doesn't actually respond to a click considered a UX mistake, rather than a harmless stylistic choice?▼

Related Functions

Pointer-eventsVisibilityResize