The every cursor style you need(CSS)

When it comes to setting the type of cursor we mostly use pointer eg.

.btn:hover{
    cursor: pointer;
}

But there are so many more types to cursor available to use. So let's explore the most useful ones.

1. all-scroll When you want to indicate that user can scroll on all direction you can use cursor: all-scroll.
2. cell When a user in hovering on a button that is used to add a cell(spreadsheet for example) you can use cursor: cell.
3. col-resize If a colum(div) is resizable you can use cursor: col-resize to indicate that.
4. crosshair If you want the cursor you turn into a plus icon you can use cursor: crosshair.
5. grabbing If you want the cursor you turn into a hand icon you can use cursor: grabbing.
6. help Lets say use if hovering on a info button or link, in such case you can use cursor: help.
7. no-drop To indicate that user is not allowed to drop file/element here you can use cursor: no-drop.
8. progress To indicate that something is loading/in-progress you can use cursor: progress.
9. text To indicate that user is hovering on text/input you can use cursor: text.
10. pointer To indicate the user is hovering on a clickable element you can use cursor: pointer. ### You can visit this link to get a list of all available cursor types.

Make sure you checkout my other articles and YouTube channel

ShuvoFollow

Frontend Developer and YouTuber. Channel link: https://www.youtube.com/c/AngleBrace

Was it helpful? Support me on Patreon

Comments

[Posandu]

And BTW use this method

a {
 cursor:pointer
}

instead of

a:hover {
 cursor:pointer
}

[Shuvo]

That also works
I personally prefer a:hover because it better explain what happens