CSS Cursors
Master CSS cursor property to provide visual feedback and improve user experience with custom mouse cursors.
The cursor property changes the mouse pointer appearance, providing visual feedback about element interactivity.
Default Cursors
.default { cursor: default; } /* Arrow */
.pointer { cursor: pointer; } /* Hand pointer */
.text { cursor: text; } /* I-beam */
.move { cursor: move; } /* Move icon */
.not-allowed { cursor: not-allowed; } /* Forbidden */
.wait { cursor: wait; } /* Loading */
.help { cursor: help; } /* Question mark */Interactive Cursors
button { cursor: pointer; }
a { cursor: pointer; }
.draggable { cursor: move; }
.resizable { cursor: nwse-resize; }
input[type="text"] { cursor: text; }
.disabled { cursor: not-allowed; }Resize Cursors
.resize-n { cursor: n-resize; }
.resize-s { cursor: s-resize; }
.resize-e { cursor: e-resize; }
.resize-w { cursor: w-resize; }
.resize-ne { cursor: ne-resize; }
.resize-nw { cursor: nw-resize; }
.resize-se { cursor: se-resize; }
.resize-sw { cursor: sw-resize; }
.resize-ew { cursor: ew-resize; }
.resize-ns { cursor: ns-resize; }
.resize-nesw { cursor: nesw-resize; }
.resize-nwse { cursor: nwse-resize; }Special Cursors
.grab { cursor: grab; }
.grabbing { cursor: grabbing; }
.zoom-in { cursor: zoom-in; }
.zoom-out { cursor: zoom-out; }
.crosshair { cursor: crosshair; }
.copy { cursor: copy; }
.alias { cursor: alias; }
.context-menu { cursor: context-menu; }
.cell { cursor: cell; }
.vertical-text { cursor: vertical-text; }
.no-drop { cursor: no-drop; }
.progress { cursor: progress; }
.col-resize { cursor: col-resize; }
.row-resize { cursor: row-resize; }
.all-scroll { cursor: all-scroll; }Custom Cursors
.custom {
cursor: url('cursor.png'), auto;
}
.custom-pointer {
cursor: url('pointer.cur'), pointer;
/* Fallback to pointer if image fails */
}
/* With hotspot */
.custom-hotspot {
cursor: url('cursor.png') 10 10, pointer;
/* x y coordinates of hotspot */
}Practical Examples
Buttons
button {
cursor: pointer;
}
button:disabled {
cursor: not-allowed;
}Links
a {
cursor: pointer;
}
a[href^="http"] {
cursor: alias; /* External link */
}Form Elements
input[type="text"],
textarea {
cursor: text;
}
input[type="checkbox"],
input[type="radio"] {
cursor: pointer;
}
input:disabled {
cursor: not-allowed;
}Draggable Elements
.draggable {
cursor: move;
}
.draggable:active {
cursor: grabbing;
}Loading State
.loading {
cursor: wait;
pointer-events: none;
}
.processing {
cursor: progress;
}Best Practices
Cursor Best Practices
- Use
pointerfor clickable elements - Use
not-allowedfor disabled elements - Use
textfor text input areas - Use
movefor draggable elements - Use
waitduring loading operations - Provide fallback for custom cursors
- Test custom cursor visibility
- Keep custom cursors simple
- Maintain consistency across similar elements
Master cursor styling to provide clear visual feedback and improve user experience!
How is this guide?
Sign in to share your feedback
Help us improve by sharing your thoughts on this guide.
Last updated on
CSS Forms
Master CSS form styling to create beautiful, user-friendly forms with proper validation states and accessibility.
CSS Positioning
Master CSS positioning to precisely control element placement using static, relative, absolute, fixed, and sticky positioning.
© 2026CoderrShyamAll Rights Reserved.