CSS Cursors
Hover over any box to see the corresponding CSS cursor in action. Click a box to copy its CSS code to your clipboard.
autoBrowser determines the cursor.
defaultStandard arrow cursor.
noneNo cursor is displayed.
context-menuContext menu is available.
helpHelp information is available.
pointerLink pointer (usually a hand).
progressProcess running in background.
waitProgram is busy.
cellIndicates a cell or set of cells.
crosshairSimple crosshair.
textIndicates text that may be selected.
vertical-textVertical text selection.
aliasAlias or shortcut is being created.
copySomething is being copied.
moveSomething is being moved.
no-dropDropped item not allowed here.
not-allowedRequested action not allowed.
grabSomething can be grabbed.
grabbingSomething is being grabbed.
all-scrollSomething can be scrolled in any direction.
col-resizeColumn can be resized horizontally.
row-resizeRow can be resized vertically.
n-resizeResize towards North (up).
e-resizeResize towards East (right).
s-resizeResize towards South (down).
w-resizeResize towards West (left).
ne-resizeResize towards North-East.
nw-resizeResize towards North-West.
se-resizeResize towards South-East.
sw-resizeResize towards South-West.
ew-resizeBidirectional horizontal resize.
ns-resizeBidirectional vertical resize.
nesw-resizeBidirectional diagonal resize (NE-SW).
nwse-resizeBidirectional diagonal resize (NW-SE).
zoom-inZoom in available.
zoom-outZoom out available.
How to Use
The cursor CSS property specifies the mouse cursor to be displayed when pointing over an element.
.custom-button {
cursor: pointer; /* Indicates interactive element */
}
.loading-state {
cursor: wait; /* Indicates busy state */
}
.draggable-item {
cursor: grab; /* Indicates item can be grabbed */
}