🖱️ CSS cursor: Customize Your Mouse Pointer’s Look

When you move your mouse over buttons, links, or other interactive elements on a webpage, the mouse pointer often changes shape to indicate what kind of interaction is possible. The CSS cursor property controls what your mouse pointer looks like when it hovers over an element.

---

🧾 What is cursor?

The cursor property lets you specify the type of mouse cursor displayed when the pointer is over an element. This improves user experience by visually communicating interactivity, restrictions, or specific behaviors.

---

🧬 Syntax

selector {
  cursor: <cursor-type>;
}

Common <cursor-type> values:

Cursor Value	Description	Example Use Case
default	Default arrow cursor	Regular text or non-interactive
pointer	Hand icon (usually for links/buttons)	Clickable elements like links
text	I-beam text cursor	Over selectable or editable text
wait	Hourglass or spinning circle	Indicates waiting/loading
move	Four-way arrow	Draggable elements
not-allowed	Circle with a line (for forbidden action)	Disabled buttons or invalid areas
crosshair	Crosshair cursor	For precise selections
grab / grabbing	Open or closed hand for drag and drop	Dragging interfaces

---

🎯 Examples

1. Pointer cursor on a button

button {
  cursor: pointer;
}

When you hover over the button, the pointer changes to a hand icon, indicating it’s clickable.

---

2. Text cursor on a paragraph (default behavior)

p {
  cursor: text;
}

Makes the cursor switch to an I-beam when hovering, signaling selectable text.

---

3. Custom cursor with an image

.custom-cursor {
  cursor: url('cursor.png'), auto;
}

Replaces the cursor with a custom image. The auto fallback ensures a default cursor if the image can’t load.

---

🧠 How It Works

• The browser shows the specified cursor when hovering over the element.
• Multiple cursors can be specified as fallbacks — the browser uses the first supported one.
• Custom image cursors must be small (typically 32×32 px or less) for best performance.
• Cursor changes enhance usability and accessibility by giving visual feedback.

---

🛠️ Tips & Best Practices

• Use pointer for any clickable element — users expect it on buttons and links.
• Avoid confusing cursor changes that don’t match the behavior.
• For drag-and-drop interfaces, use grab and grabbing for clear interaction cues.
• Test custom cursors for visibility on different backgrounds.
• Don’t rely solely on cursor changes — combine with other UI clues for accessibility.

---

✅ Browser Support

Fully supported in all modern browsers and even older versions:

• ✅ Chrome
• ✅ Firefox
• ✅ Safari
• ✅ Edge
• ✅ Internet Explorer 6+

---

🔚 Conclusion

The CSS cursor property is a simple way to improve your site’s interactivity and user feedback. By changing the mouse pointer, you can make your interface more intuitive and user-friendly.

---