CSS Cursor

The CSS cursor property controls the type of cursor that is displayed when the mouse pointer is over an element. It enhances the user experience by giving visual feedback about the expected interaction with elements.

Syntax

selector {
  cursor: value;
}

Try It Now

Common Cursor Values

  • default: The default cursor (usually an arrow).
  • pointer: A pointer cursor (usually a hand), indicating a clickable element.
  • text: A text cursor (usually an I-beam), indicating text selection.
  • move: A move cursor, indicating that the element can be moved.
  • wait: A wait cursor (usually an hourglass), indicating that a process is ongoing.
  • crosshair: A crosshair cursor, often used for precise selection.
  • not-allowed: A cursor indicating that the action is not allowed.
  • grab: A hand-shaped cursor, indicating draggable content.
  • zoom-in: A cursor indicating that the element can be zoomed into.

Example Usage

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Cursor Example</title>
  <style>
    .default-cursor {
      cursor: default;
    }

    .pointer-cursor {
      cursor: pointer;
    }

    .text-cursor {
      cursor: text;
    }

    .move-cursor {
      cursor: move;
    }

    .not-allowed-cursor {
      cursor: not-allowed;
    }
  </style>
</head>
<body>
  <button class="default-cursor">Default Cursor</button>
  <button class="pointer-cursor">Pointer Cursor</button>
  <p class="text-cursor">Hover over this text to see the text cursor.</p>
  <div class="move-cursor" style="width: 100px; height: 100px; background: lightblue;">Move Cursor</div>
  <button class="not-allowed-cursor" disabled>Not Allowed Cursor</button>
</body>
</html>

Try It Now

Custom Cursor

You can also use custom images for the cursor by specifying a URL to an image file, with a fallback cursor type.

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

Try It Now

Tips for Using Cursors

  1. Enhance Usability: Use cursor styles to convey interactivity and guide users on how to interact with elements.
  2. Consistency: Ensure cursor styles are consistent across your site to avoid confusing users.
  3. Fallbacks: Always provide a fallback cursor type to ensure compatibility across different browsers.
  4. Custom Cursors: Use custom cursors sparingly and ensure they are intuitive and do not distract from the user experience.

By using the cursor property effectively, you can significantly improve the interactivity and user experience of your web pages.