DEV Community

Cover image for The every cursor style you need(CSS)
Shuvo
Shuvo

Posted on

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;
}


Enter fullscreen mode Exit fullscreen mode

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

Make sure you checkout my other articles and YouTube channel

Was it helpful? Support me on Patreon

Patreon Logo

Top comments (2)

Collapse
 
posandu profile image
Posandu • Edited

And BTW use this method

a {
 cursor:pointer
}
Enter fullscreen mode Exit fullscreen mode

instead of

a:hover {
 cursor:pointer
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
0shuvo0 profile image
Shuvo

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