CSS Cursors Types Custom Cursor

The cursor Property

The cursor property changes the mouse pointer to match the action a user can take. It is a small detail, but it helps users understand whether something can be clicked, dragged, selected, zoomed, or is temporarily unavailable.

Cursors should confirm behavior that already exists. A hand cursor does not make a div accessible like a button, and a custom cursor does not replace clear labels, focus states, or touch-friendly design.

Cursor values should reinforce an interaction that already works, not pretend a disabled element is clickable or replace labels and accessible states.

The CSS cursor property controls the mouse pointer that appears when a user hovers over an element. A clear cursor can communicate whether something is clickable, draggable, disabled, zoomable, or simply informational.

Good cursor choices improve usability, but they should support the interface rather than replace good labels and layout. If everything gets a fancy cursor, users stop trusting what it means.

Common Cursor Values

Value	Meaning	Typical Use
default	Regular arrow pointer	Normal page content
pointer	Hand cursor	Buttons, links, interactive cards
text	Text selection cursor	Editable or selectable text
move	Move indicator	Drag-and-drop interfaces
not-allowed	Action unavailable	Disabled controls
grab / grabbing	Draggable item	Sliders, canvas panning, sortable lists
wait	Busy state	Temporary loading states
zoom-in	Can enlarge	Image viewers or previews

Practical Examples

Using different cursors in a UI

button {
    cursor: pointer;
}

input[disabled],
button[disabled] {
    cursor: not-allowed;
}

.article-copy {
    cursor: text;
}

.draggable-card {
    cursor: grab;
}

.draggable-card:active {
    cursor: grabbing;
}

.image-preview {
    cursor: zoom-in;
}

CSS Cursors Applied Examples

<button>Save</button>
<button disabled>Delete</button>
<p class="article-copy">Select this text.</p>
<div class="draggable-card">Drag me</div>
<img class="image-preview" src="photo.jpg" alt="Preview image">

Custom Cursor Images

You can use a custom image as the cursor with url(), followed by a fallback keyword. This is useful for specialized tools such as drawing apps or games, but it should be used carefully because custom cursors can feel distracting or inconsistent across devices.

The fallback keyword is important because the browser may ignore unsupported cursor file formats or oversized assets.

Custom cursor image

.drawing-surface {
    cursor: url('brush.cur'), crosshair;
}

Best Practices

Use cursor values as interaction hints, not decoration. On touch devices, cursors are not visible, so the interface must still be understandable through layout, labels, states, and spacing.

Use pointer for elements that behave like buttons or links.
Do not add special cursors just for decoration.
Keep disabled states honest with not-allowed only when the control is truly inactive.
Always provide a fallback when using url() custom cursors.
Remember that touch devices do not show mouse cursors, so do not rely on them alone.

Matching cursor feedback to real interaction

The cursor property gives users a quick hint about what can happen when they point at an element. cursor: pointer suggests clicking, text suggests text selection, not-allowed suggests a disabled action, and resize cursors suggest dragging. Good cursor usage supports the real interaction instead of decorating randomly.

A cursor should never promise behavior that does not exist. If a card uses cursor: pointer but is not clickable by keyboard or mouse, users get misleading feedback. For accessibility, cursor changes should work with proper semantic elements, focus styles, and disabled states.

Use pointer for clickable buttons and links.
Use not-allowed only when the control is genuinely disabled.
Use text for selectable text areas.
Do not rely on cursor alone to communicate state.