🖱️ CSS Tutorial: cursor

📌 Introduction

The cursor property in CSS allows you to control the mouse cursor style when hovering over an element. It improves user experience by visually signaling interactivity—such as clickable buttons, draggable items, resizing zones, loading states, and more. Mastering cursor styles helps you build intuitive and polished interfaces. ✨

🎯 What Does cursor Do?

  • Changes the mouse pointer when the user hovers
  • Indicates clickable or interactive elements
  • Supports built-in cursor styles
  • Allows custom images for far richer interactions

✨ Syntax

Basic Syntax

selector {
  cursor: <keyword> | <url> | <keyword-list>;
}

Note

When using custom cursor images, use url() with a fallback cursor keyword for best compatibility.

🧩 Standard Cursor Values

1. Basic Interaction Cursors

  • auto – browser decides
  • default – standard arrow
  • pointer – link hand cursor (use on clickable elements)
  • none – hides the cursor

Code Snippet

button {
  cursor: pointer;
}

2. Text & Selection Cursors

  • text – text selection cursor
  • vertical-text
  • crosshair

Code Snippet

p {
  cursor: text;
}

3. Drag & Move Cursors

  • move
  • grab
  • grabbing

Code Snippet

.draggable {
  cursor: grab;
}

4. Resize Cursors

  • e-resize, w-resize
  • n-resize, s-resize
  • ne-resize, nw-resize
  • se-resize, sw-resize
  • col-resize, row-resize

Resize Example

.resize-box {
  cursor: se-resize;
}

5. State Cursors

  • wait – loading spinner
  • progress – in progress but interactable
  • not-allowed – disabled interaction
  • help – help icon

Disabled Example

button:disabled {
  cursor: not-allowed;
}

6. Custom Cursor Using URL

Use a custom image (PNG, SVG, or CUR format).

Custom Cursor

.custom {
  cursor: url("cursor.png") 4 4, auto;
}

Note

The two numbers (e.g., 4 4) define the cursor’s hotspot coordinates.

🔥 Practical Examples

1. Button Hover

Button Cursor

button:hover {
  cursor: pointer;
}

2. Drag & Drop UI

Drag UI

.drag-item {
  cursor: grab;
}
.drag-item:active {
  cursor: grabbing;
}

3. Resize Handle

Code Snippet

.right-handle {
  cursor: e-resize;
}

4. Loading State

Code Snippet

.loading {
  cursor: wait;
}

5. Hide Cursor (Games / Custom UI)

Code Snippet

.no-cursor {
  cursor: none;
}

📊 Cursor Value Reference Table

CursorMeaning
pointerClickable element
moveMovable item
grab / grabbingDraggable
waitLoading
not-allowedDisabled
helpHelp icon
textText selection

🧠 Tips & Best Practices

  • Use pointer for all clickable UI elements
  • Don’t overuse fancy cursors—they should enhance UX, not distract from it
  • Always supply a fallback when using a custom image cursor
  • Avoid cursor: none unless for custom UI or gaming purposes
>>“A small cursor change can make a big difference in user experience.” ✨

🎉 Conclusion

The cursor property is a simple yet powerful UI enhancement tool. It clearly communicates interactivity and improves overall usability. Whether you're building buttons, drag-and-drop interfaces, custom cursors, or progress states — mastering cursor styles helps create polished and intuitive designs. 🚀