Customize Your Cursor

The cursor property is used to control the cursor style when it is hovered over an element.

By default, the browser will take care of it for you.

When the cursor hovers over a clickable button or link, the cursor will turn into a hand. When it hovers over selectable text, it changes to an I-shaped selector.

However, sometimes the automatic styles are inaccurate, and the browser needs your help.

For example, you are creating a loading state button:

html

<button disabled>Loading...</button>

The browser will treat this button as an ordinary disabled button because it won't recognize its content (Loading...).

In this case, you could tell the browser that this button means something is being loaded, and it should change the cursor style accordingly:

css

button {
  cursor: progress;
}

Besides progress, there are several other cursor styles available. Here is a full list of accepted keywords for the cursor property:

Here is a convenient reference table of accepted keyword values for the cursor property:

Keyword	Description
`auto`	Let the user agent decide the cursor (default behavior).
`default`	The platform-dependent default cursor (usually an arrow).
`none`	No cursor is shown.
`context-menu`	Indicates context menu is available.
`help`	Indicates help is available (often a question mark).
`pointer`	A pointing hand, for links and clickable items.
`progress`	Indicates background processing; user can still interact.
`wait`	Indicates waiting; usually prevents interaction.
`cell`	Indicates a cell or table selection.
`crosshair`	A simple crosshair cursor.
`text`	I-beam cursor for text selection.
`vertical-text`	Vertical text selection cursor.
`alias`	Shows that an alias (shortcut) will be created.
`copy`	Indicates something will be copied.
`move`	Indicates something is to be moved.
`no-drop`	Indicates that dropping is not allowed here.
`not-allowed`	Indicates the requested action is not allowed.
`grab`	Indicates something can be grabbed (hand open).
`grabbing`	Indicates something is being grabbed (hand closed).
`e-resize`	Resize cursor pointing east (right).
`n-resize`	Resize cursor pointing north (up).
`ne-resize`	Resize cursor pointing northeast.
`nw-resize`	Resize cursor pointing northwest.
`s-resize`	Resize cursor pointing south (down).
`se-resize`	Resize cursor pointing southeast.
`sw-resize`	Resize cursor pointing southwest.
`w-resize`	Resize cursor pointing west (left).
`all-scroll`	Indicates scrolling in any direction (pan).
`col-resize`	Indicates column resize.
`row-resize`	Indicates row resize.
`zoom-in`	Indicates zoom-in action is available.
`zoom-out`	Indicates zoom-out action is available.
`inherit`	Inherit the cursor value from its parent.
`initial`	Reset to the initial CSS value.
`unset`	Resets to inherited if inheritable, otherwise to initial.