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 - Usenot-allowedfor disabled elements - Usetextfor text input areas - Usemovefor draggable elements - Usewaitduring 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?
Last modified:
March 7th, 2026
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.