CSS Cursors

The cursor property in CSS is used to define the appearance of the mouse pointer when hovering over an element. It’s commonly combined with :hover to give users a better visual experience.

Syntax

				
					selector {
    cursor: value;
}

You can use predefined keywords like pointer, move, text, and many more to change the cursor style.

Basic Cursor Types

				
					<!DOCTYPE html>
<html lang="en">
<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .cursor-box {
            padding: 12px;
            margin: 10px;
            width: 200px;
            background-color: #f1c40f;
            text-align: center;
            font-family: Arial;
        }

        .pointer { cursor: pointer; }
        .text { cursor: text; }
        .move { cursor: move; }
        .wait { cursor: wait; }
        .not-allowed { cursor: not-allowed; }
        .zoom-in { cursor: zoom-in; }
    </style>
</head>
<body>

    <div class="cursor-box pointer">Pointer Cursor</div>
    <div class="cursor-box text">Text Cursor</div>
    <div class="cursor-box move">Move Cursor</div>
    <div class="cursor-box wait">Wait Cursor</div>
    <div class="cursor-box not-allowed">Not Allowed Cursor</div>
    <div class="cursor-box zoom-in">Zoom In Cursor</div>

</body>
</html>

Explanation: When you hover over each box, the mouse pointer changes to a different style depending on the assigned class.

Other Common Cursor Values

Here are more cursor options you can explore:

default
crosshair
help
grab / grabbing
col-resize, row-resize
e-resize, n-resize, ne-resize, etc.
no-drop
progress

Each one gives a different visual feedback depending on the interaction purpose.

Custom Cursor Image

You can even use your own image as a cursor!

				
					<!DOCTYPE html>
<html lang="en">
<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .custom-cursor {
            cursor: url('my-cursor.png'), auto;
            padding: 15px;
            background-color: #2ecc71;
            color: white;
            text-align: center;
        }
    </style>
</head>
<body>

    <div class="custom-cursor">Hover Me for Custom Cursor</div>

</body>
</html>

Note: Make sure your custom image is small (like 32×32 pixels) and in .png format with transparency for best results.

Combine with :hover for Better UX

				
					button:hover {
    cursor: pointer;
    background-color: #3498db;
}

This makes buttons feel interactive and more intuitive to click.