CSS: Cursors

n CSS, the cursor property is used to change the mouse cursor’s appearance when it’s over an element. This property enhances user experience by providing visual feedback about the possible actions or the nature of the element. Here are some of the values you can use for the cursor property:

• auto: The browser sets a cursor based on the context.
• default: The default cursor, usually an arrow.
• none: No cursor is rendered for the element.
• pointer: A hand icon, indicating a link or clickable item.
• text: Indicates text that can be selected.
• crosshair: A crosshair, often used in graphics applications.
• move: Indicates something that can be moved.
• not-allowed: Indicates an action is not permitted.
• wait: Indicates that the application is busy and the user should wait.
• help: A question mark or a balloon, indicating help is available.
• resize directions (e.g., n-resize, e-resize, s-resize, w-resize): Indicate that an element’s edge can be resized in the north, east, south, or west direction.
• resize diagonals (e.g., ne-resize, nw-resize, se-resize, sw-resize): Indicate that an element’s corner can be resized in the specified diagonal direction.
• zoom-in / zoom-out: Indicate that something can be zoomed in or out.

Additionally, you can specify custom cursors using a URL value:

CSS

.custom-cursor {
  cursor: url('path-to-cursor-image.png'), auto;
}