CSS Cursor Pointers

Utilities for controlling the cursor style when hovering
over an element.

The cursor property in CSS is your go-to tool for controlling how the mouse pointer looks when it hovers over elements on your webpage. By default, browsers use an arrow cursor for most elements and switch to a hand (pointer) cursor for interactive ones like links. But why settle for defaults when you can create a more engaging experience? With CSS, you can easily customize cursor styles to match your design and guide users seamlessly through your site.

Cursor Utilities and Examples

Default Cursor

Let the browser decide the cursor style based on the content. Use cursor-auto for a hassle-free setup.

 Hover me

Pointer Cursor

Turn your cursor into a pointing hand to signal clickable elements like buttons or links. Use cursor-pointer

 Hover me

Move Cursor

Want to indicate something draggable? Use cursor-move to change the cursor into a move icon.

 Hover me

Text Cursor

Highlight selectable text with an I-beam cursor using cursor-text .

Hover me

Zoom In Cursor

Need to show zoom functionality? Use cursor-zoom-in to change the cursor to a magnifying glass with a plus icon.

Hover me

Zoom Out Cursor

Similar to zoom-in, but for zooming out. Use cursor-zoom-out to signal the action.

Hover me

Not Allowed Cursor

When users can't interact with an element, use cursor-not-allowed to show a "no action" symbol.

Hover me

Wait Cursor

Show users that something is loading or processing with cursor-wait.

 Hover me

Quick Tips for Using CSS Cursors

1. Keep it simple: Use clear, intuitive cursor styles that align with the action.
2. Enhance accessibility: Pair cursor changes with visual or textual cues for a better user experience.
3. Test across devices: Ensure cursor styles work well on all browsers and devices.