How to Change Cursor to a Hand Pointer in CSS

Set cursor: pointer; on an element that users can activate to show the familiar hand cursor when they hover over it. Links commonly use this cursor already; the same rule is useful for buttons or custom interactive controls. Use it to reinforce an action, not to make a decorative element appear clickable.

Set the CSS cursor property to pointer

Add the declaration to the selector for the link, button, or other interactive element. The following JavaScript example prints the CSS rule for a button, which you can copy into a stylesheet. The output is the rule text.

const rule = "button { cursor: pointer; }";
console.log(rule);

button { cursor: pointer; }

This complete page also shows the rule in context on a link and a button. Adapt the selectors to match your own markup.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Pointer cursor example</title>
  <style>
    a,
    button {
      cursor: pointer;
    }
  </style>
</head>
<body>
  <a href="#details">View details</a>
  <button type="button">Show details</button>
  <section id="details">
    <h1>Details</h1>
    <p>This section is the destination of the View details link.</p>
  </section>
</body>
</html>

The pointer value is the CSS keyword for the hand cursor. A link with a valid href usually displays it by default, so an explicit rule is often unnecessary for ordinary links. Buttons are interactive controls too, and applying the rule makes the cue consistent with links. If a custom element responds to a click, pair the cursor cue with appropriate semantics and keyboard behavior; the cursor alone does not make an element accessible or interactive.

Choose a selector that targets only the controls that perform an action. For example, a site-wide button rule covers native buttons, while a class such as .open-panel can target one custom control. Avoid assigning pointer to every element or to text that only looks like a control: the visual cue sets an expectation that the element can be activated. Keep the actual action available through a link or button, and use the cursor styling as a supporting signal. If another CSS rule overrides this declaration, inspect the matching selectors and cascade in your stylesheet.

Use a custom cursor image with a fallback

To use an image instead of the browser’s standard hand, set the cursor value to url() followed by a fallback keyword. For example, cursor: url("/images/hand-cursor.png"), pointer; asks the browser to use /images/hand-cursor.png and fall back to pointer if that image cannot be loaded or used. Place the image at that path in your site, or change the URL to the image’s actual location. A relative URL in an external stylesheet is resolved relative to that stylesheet, while a URL in inline CSS is resolved against the document’s base URL, so a missing or incorrect path prevents the custom image from appearing; the fallback still provides the standard hand cursor. You can use auto as a fallback when you want the browser’s usual cursor for the element instead. Keep the fallback in the declaration so that users still get a clear cursor when the image is unavailable.