CSS Cursors

The cursor property controls the mouse pointer when it’s over an element. Use it to signal interactivity (like pointer for buttons/links) or to hint actions (drag, resize, zoom).

1) Common Cursor Values


.btn   { cursor: pointer; }
.input { cursor: text; }
.drag  { cursor: move; }
.help  { cursor: help; }
Hover
auto
Hover
default
Hover
pointer
Hover
text
Hover
move
Hover
help
Hover
not-allowed
Hover
crosshair
Hover
wait
Hover
progress

2) Resize Cursors


.resizer-x { cursor: ew-resize; }
.resizer-y { cursor: ns-resize; }
.resizer-ne{ cursor: nesw-resize; }
.resizer-nw{ cursor: nwse-resize; }
Drag edge
ew-resize
Drag edge
ns-resize
Drag corner
nesw-resize
Drag corner
nwse-resize
Drag edge
n-resize
Drag edge
e-resize
Drag edge
s-resize
Drag edge
w-resize

3) Grab / Zoom Cursors


.draggable { cursor: grab; }
.draggable:active { cursor: grabbing; }
.zoom { cursor: zoom-in; } /* or zoom-out */
Drag
grab
Drag
grabbing
Hover
zoom-in
Hover
zoom-out

4) Custom Image Cursor (+ Fallback)


.custom-area{
  cursor: url('../asset/img/cursor-hand.png') 8 8, pointer;
}
Custom cursor
PNG 32×32, hotspot at 8×8

If the image fails to load or isn’t supported, the cursor falls back to pointer.

Tips & Best Practices:

  • Use pointer for all clickable UI (buttons, custom controls) — this improves affordance.
  • Keep custom cursor images small (≤ 32×32) and set hotspot coordinates (the two numbers after the URL).
  • Not all values are supported in every browser; provide sensible fallbacks (e.g., cursor: grab; cursor: move;).
  • Avoid misleading cursors: don’t use not-allowed on active controls or text on non-editable content.