Introduction
CSS enables you to customize the cursor’s appearance, enhancing user interaction by signaling specific actions. For instance, it’s common to change the cursor to a pointer when hovering over a clickable element. In this lesson we will look at some of the most commonly used cursor styles as well as how to create your own custom cursor.
Basic Cursor Styles
The cursor property defines how the pointer appears when hovering over an element. You can see some of the styles below. Hover over each row to see what the cursor does.
| Style Declaration | Effect |
|---|---|
| cursor: auto; | default |
| cursor: crosshair; | crosshair |
| cursor: pointer; | pointer |
| cursor: move; | move |
| cursor: wait; | wait |
| cursor: grab; | grab |
| cursor: grabbing; | grabbing |
| cursor: not-allowed; | not-allowed |
| cursor: zoom-in; | zoom-in |
| cursor: zoom-out; | zoom-out |
| cursor: none; | none |
Custom Cursors
Want to use your own image as a cursor? You can do this:
cursor: url('custom-cursor.png'), auto; /* replace custom-cursor.png with the url to your image
💡 Tip: The second value (auto) ensures a fallback if the custom cursor doesn’t load.
💡 Tip: CSS does not allow you to resize a custom cursor image directly. The image must be provided in the desired size.
Interactive Cursor Effects
You can change cursors dynamically for hover effects:
button:hover {
cursor: pointer;
}
Summary
Cursors are a small but effective way to improve user experience. You can set the cursor to indicate an available user interaction, such as click, drag, or zoom. You can use one of the many available cursor values or create your own.
