CSS cursor Property

CSS cursor Property

The cursor property in CSS controls the appearance of the mouse pointer when hovering over an element. It helps improve user experience and interactivity.

1. Syntax

selector {
  cursor: value;
}

Value	Description
auto (default)	The browser decides the cursor type.
default	Standard arrow pointer.
pointer	Hand cursor (for links & buttons).
text	I-beam cursor (for text selection).
move	Crossed arrows (for moving elements).
not-allowed	No entry sign (disabled actions).
wait	Loading spinner.
help	Question mark cursor.
grab	Open hand (for draggable items).
grabbing	Closed hand (while dragging).
crosshair	Precision crosshair.
zoom-in	Magnifying glass (zoom in).
zoom-out	Magnifying glass (zoom out).

2. Example – Changing Cursor on Hover

button {
  cursor: pointer;
}

<button>Click Me</button>

✅ The button shows a hand cursor on hover.

3. Example – Cursor for Text Selection

.text {
  cursor: text;
}

<p class="text">Select this text.</p>

✅ The cursor changes to an I-beam.

4. Example – Disabled Cursor (not-allowed)

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

<button class="disabled" disabled>Disabled</button>

✅ Shows a blocked sign when hovering over the disabled button.

5. Example – Custom Cursor Using URL

.custom {
  cursor: url('cursor.png'), auto;
}

✅ Uses a custom cursor image, falling back to auto if unavailable.

6. Best Practices

✔ Use cursor: pointer; for clickable elements (buttons, links).
✔ Use cursor: not-allowed; for disabled elements.
✔ Use cursor: grab; for drag-and-drop features.
✔ Avoid overusing custom cursors to maintain usability.