Understanding Cursor Styles and Smooth Scrolling in CSS

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 will change into an I-shaped selector.

However, sometimes the automatic styles are not accurate, and the browser needs some help from you.

For example, you are creating a loading state button:

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

The browser will treat this button as an ordinary disabled button, as it won't understand 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:

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: