CSS Cursors — Types and Custom Cursor Guide

The cursor Property

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

Practical Examples

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;
}

<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.

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

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

Best Practices

• 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.

FAQ