Understanding Cursor Styles and Smooth Scrolling in CSS

CSS provides powerful tools to improve user interaction and navigation on a webpage. In this lesson, we are going to discuss two of them, cursor and scroll-behavior.

Cursor

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

By default, the browser will take care of the cursor style for you. When it 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:

1<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 like this:

1button {
2  cursor: progress;
3}

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