CSS Cursor: Syntax, Usage, and Examples

The CSS cursor property lets you control how the mouse pointer appears when users hover over an element. This visual feedback helps users understand when something is clickable, draggable, or waiting for input. From links and buttons to loading indicators and even custom designs, the CSS cursor property allows you to guide user interaction in subtle but powerful ways.

How to Use the CSS Cursor Property

The basic syntax of the CSS cursor property is straightforward. You apply it like any other CSS rule:

selector {
  cursor: value;
}

For example, to make an element show a pointer (usually used for clickable items), you'd write:

button {
  cursor: pointer;
}

This makes the mouse cursor change to a hand icon when hovering over the button.

You can use the cursor CSS property with HTML elements, pseudo-classes like :hover, or even on elements created with JavaScript.

When to Use Cursor CSS

You should apply the cursor CSS property when you want to change the default pointer behavior for better usability or stylistic control. Here are some typical use cases:

Indicating Clickable Elements

Use cursor: pointer; to show that something is clickable, like links, buttons, or interactive cards.

a, button, .clickable {
  cursor: pointer;
}

This is one of the most widely used cursor types and improves clarity for users.

Signaling Inactive or Disabled States

When buttons or fields are disabled, show a not-allowed cursor to indicate they can’t be interacted with:

button:disabled {
  cursor: not-allowed;
}

This reduces confusion and helps set expectations for interaction.

Displaying Loading or Progress States

If your site performs a background task like submitting a form or fetching data, switch the cursor to wait:

body.loading {
  cursor: wait;
}

This gives users visual confirmation that something is in progress.

Enhancing Visual Design with Custom Cursors

You can use images to define a CSS custom cursor and replace the default pointer entirely:

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

This is useful for games, creative websites, or apps with strong visual branding.

Examples of Cursor CSS in Action

Default Cursor Behavior

div {
  cursor: default;
}

This restores the standard arrow icon, even if other styles might override it.

Using Cursor Pointer for Interactive Elements

.card:hover {
  cursor: pointer;
}

Users instantly recognize that the card can be clicked or tapped.

Custom Cursor from an Image

.fancy-button {
  cursor: url('cursor-star.png'), pointer;
}

This combines a custom image with a fallback in case the image doesn’t load.

Cursor for Draggable Elements

.drag-item {
  cursor: move;
}

This shows a four-way arrow to suggest dragging, which is perfect for sortable lists or drag-and-drop features.

Learn More About CSS Cursor Types

CSS Cursor Types and Values

There are many built-in cursor options in CSS. Some of the most common include:

• default – Standard arrow cursor
• pointer – Hand icon, typically for links and buttons
• text – I-beam for text fields
• move – Crossed arrows for dragging
• wait – Hourglass or spinning wheel
• help – Question mark for context help
• not-allowed – Circle with a line through it

Other useful types of cursor CSS include:

• progress – Indicates a process is ongoing but interaction is still possible
• crosshair – Cross-shaped pointer
• grab and grabbing – Indicate something is draggable
• none – Hides the cursor entirely

You can apply any of these like so:

.text-area {
  cursor: text;
}

CSS Mouse Cursor for Specific UX Scenarios

Choose cursor types based on user context. For instance:

• Use text on any area where users are expected to enter or highlight text.
• Use help on tooltips or icons that open guides or documentation.
• Use wait on processes that block interaction until complete.
• Use not-allowed on forms or buttons that aren’t currently valid.

This kind of fine-tuned feedback improves UX without requiring any extra JavaScript or animation.

Styling Cursor on Hover

Change the cursor dynamically on hover to indicate interactivity:

.icon:hover {
  cursor: pointer;
}

You can also combine with transition effects or other hover styles to make interfaces feel more polished.

Using Cursor CSS with JavaScript

You can dynamically update the cursor using JavaScript:

document.body.style.cursor = 'wait';

setTimeout(() => {
  document.body.style.cursor = 'default';
}, 2000);

This technique is helpful during AJAX calls or long-running operations.

CSS Custom Cursor Tips

When using a custom cursor image:

1. Keep the image small (ideally 32x32 pixels).
2. Use a PNG with transparency for best results.
3. Always include a fallback value like auto or pointer:

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

Not all browsers support all image formats, and some may restrict custom cursors based on file size or domain policies.

Avoiding Bad Practices

While using cursor CSS can improve the user experience, there are some mistakes to avoid:

• Don’t use pointer on non-clickable elements. This confuses users.
• Don’t hide the cursor unless it’s essential. For example, use cursor: none; only in fullscreen games or drawing apps.
• Don’t rely solely on cursor changes for feedback. Always combine with visual cues like hover states or animations for accessibility.

Cursor CSS in Interactive Projects

You’ll find the cursor property used often in:

• Buttons and menus: cursor: pointer
• Editable fields: cursor: text
• Sortable lists: cursor: move
• Drag-and-drop interfaces: cursor: grab and cursor: grabbing
• Games and artistic sites: cursor: url('my-cursor.png')

When used right, the css mouse cursor becomes a subtle but important part of the interaction design.

Overriding Browser Defaults

Browsers often apply default cursors to specific elements like inputs or links. You can override them as needed:

a {
  cursor: default;
}

This prevents the hand icon if you’re using links as purely decorative elements.

Using the CSS cursor property lets you shape how users interact with your site—from guiding them through forms to making interfaces feel dynamic and engaging. Whether you're sticking to built-in CSS cursor types or using a CSS custom cursor for a unique look, this property gives you simple yet powerful control over user experience.