How to Change Cursor in CSS: Simple Guide with Examples

You can change the mouse cursor in CSS using the cursor property. Set it to values like pointer, default, or crosshair to change how the cursor looks when hovering over an element.

Syntax

The cursor property in CSS controls the appearance of the mouse pointer when it is over an element.

Basic syntax:

• cursor: value; — sets the cursor style.
• Common values include default, pointer, text, wait, crosshair, and move.

css

selector {
  cursor: value;
}

Example

This example shows how to change the cursor to a pointer when hovering over a button, indicating it is clickable.

css

button {
  cursor: pointer;
  padding: 1rem 2rem;
  font-size: 1.25rem;
  border: 2px solid #007BFF;
  background-color: white;
  color: #007BFF;
  border-radius: 0.5rem;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #007BFF;
  color: white;
}

Output

A styled button that changes background color on hover and shows a pointer cursor.

Common Pitfalls

Some common mistakes when changing cursors in CSS include:

• Using invalid cursor values that browsers do not recognize, so the cursor does not change.
• Not applying the cursor property to the correct element or state (like :hover).
• Forgetting that some cursors may look different or not appear on certain devices or browsers.

css

/* Wrong: invalid cursor value */
div {
  cursor: hand; /* 'hand' is not a valid CSS cursor value */
}

/* Correct: use 'pointer' for clickable elements */
div {
  cursor: pointer;
}

Quick Reference

Cursor Value	Description
default	Standard arrow cursor
pointer	Hand cursor, usually for links or buttons
text	I-beam cursor for text selection
wait	Indicates the program is busy
crosshair	Crosshair cursor for precision
move	Indicates something can be moved
not-allowed	Indicates an action is not allowed
help	Indicates help is available

Key Takeaways

Use the CSS cursor property to change the mouse pointer style.

Common cursor values include pointer for clickable items and default for normal arrow.

Always use valid cursor values to ensure consistent behavior across browsers.

Apply the cursor style to the correct element and state, like :hover for hover effects.

Test cursor changes on different devices and browsers for best user experience.