CSS: How to Add a Mouse Pointer (Cursor Style)

When a user hovers over an element on a website, changing the mouse pointer (also known as the cursor) can improve user experience by signaling interactivity — such as clickable buttons or draggable elements.

In this post, you’ll learn how to change the mouse pointer using CSS, including examples of common cursor types and best practices.

Table of Contents

✅ Why Change the Cursor?

Changing the cursor helps indicate:

🔗 A link or button is clickable
📝 Text can be selected or edited
⏳ The page is loading
🚫 An action is not allowed

🎨 How to Change Cursor in CSS

Use the cursor property in CSS to define what the mouse pointer should look like when hovering over an element.

📄 Syntax:

selector {
  cursor: pointer;
}

🔹 Example: Pointer for a Button

<button class="btn">Click Me</button>

.btn {
  cursor: pointer;
}

✅ The pointer cursor turns the default arrow into a hand icon — commonly used for links and buttons.

🔄 Common Cursor Values

Cursor Value	Description
`default`	Default arrow
`pointer`	Hand icon for links/buttons
`text`	Text selection (I-beam)
`move`	Move icon (4-directional arrow)
`not-allowed`	Circle with a line — disabled action
`wait`	Hourglass or loading indicator
`help`	Question mark
`crosshair`	Cross-like cursor

🧪 Demo: Different Cursors

<style>
  .text-cursor { cursor: text; }
  .pointer-cursor { cursor: pointer; }
  .wait-cursor { cursor: wait; }
  .no-cursor { cursor: not-allowed; }
</style>

<p class="text-cursor">Hover me for text cursor</p>
<p class="pointer-cursor">Hover me for pointer cursor</p>
<p class="wait-cursor">Hover me for wait cursor</p>
<p class="no-cursor">Hover me for not-allowed cursor</p>

🎯 Use Custom Cursor Images (Advanced)

You can also use a custom image as a cursor.

Example:

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

🖼️ Make sure your image is small and transparent, and provide a fallback like auto or pointer.

⚠️ Best Practices

✅ Use pointer only for clickable elements (buttons, links).
❌ Don’t use confusing cursors where they don’t belong.
✅ Keep accessibility in mind — cursors should reflect element behavior.
✅ Use cursor: not-allowed to indicate disabled buttons or links.

🧠 Summary

Use Case	Recommended Cursor
Clickable elements	`pointer`
Disabled elements	`not-allowed`
Text fields	`text`
Loading areas	`wait` or `progress`
Moveable elements	`move`, `grab`, etc.

🚀 Conclusion

Changing the mouse pointer with CSS is a simple yet powerful way to enhance your website’s interactivity and usability. By using the right cursor styles, you guide users intuitively and improve the overall experience.

Whether you’re making buttons more clickable or indicating that an action is not available, the cursor property is your go-to tool.