List of all CSS Cursors & How to Use Them
John on May 03, 2022
To change the cursor style of an HTML element when a user hovers over it, use the cursor CSS property followed by the type of cursor to use.
The example below demonstrates how to make the cursor of an HTML button element with a class a crosshair.
<button class="btn" >Click</button>
.btn {
cursor: crosshair;
}
List of All CSS Cursors Organised by Category
Here is a list of all the available CSS cursors organised by category to help you find the appropriate one.
General/Default Cursors
- auto
- default
- none
Link Cursor
- pointer
Scroll Cursor
- all-scroll
Status Cursors
- context-menu
- help
- wait
- progress
Selection Cursors
- crosshair
- cell
- text
- vertical-text
Drag & Drop Cursors
- alias
- copy
- move
- no-drop
- not-allowed
Zoom Cursors
- zoom-in
- zoom-out
Grab Cursors
- grab
- grabbing
Resizing Cursors
- e-resize
- n-resize
- ne-resize
- nw-resize
- s-resize
- se-resize
- sw-resize
- w-resize
- ew-resize
- ns-resize
- nesw-resize
- nwse-resize
- col-resize
- row-resize
