The cursor CSS property sets the type of mouse cursor to be displayed when the mouse pointer is over an element.
Display a "pointer" cursor on all links:
Display a "crosshair" cursor when hovering over a <div> element:
Display an "alias" cursor when hovering over an
|The default. The browser sets a cursor.
|A simple crosshair.
|The platform-dependent default cursor. Often rendered as an arrow.
|A clickable hand cursor.
|Indicates something is to be moved.
|Indicates the requested action will not be executed.
|Help cursor, usually a question mark or balloon.
|Indicates a bidirectional resize cursor from left and right.
|Indicates a bidirectional resize cursor from top and bottom.
|Indicates a bidirectional resize cursor from top-right and bottom-left.
|Indicates a bidirectional resize cursor from top-left and bottom-right.
|Indicates a bidirectional resize cursor from bottom to top.
|Indicates a bidirectional resize cursor from bottom-right to top-left.
|Indicates a bidirectional resize cursor from bottom-left to top-right.
|Indicates a bidirectional resize cursor from right to left.
|Indicates a text edit cursor.
|Indicates that the program is busy and the user should wait.
|A progress indicator. The program is busy, but the user may still interact with the interface.
|Inherits the value of the parent element.
- Use the "pointer" cursor for clickable elements, such as links and buttons, to indicate that they are clickable.
- Use the "not-allowed" cursor for disabled elements to indicate that they are not clickable.
- Use the appropriate cursor for the specific action or element, such as "move" for movable elements or "text" for text editing elements.
- Avoid using custom cursors as they may not be recognized by all browsers.
- Consider the accessibility implications of using custom cursors, as they may be difficult for some users to see or understand.
- Be mindful of the performance impact of using custom cursors, as some browsers may need to download the cursor resource, leading to slow loading times.