This tutorial will be on setting up a cursor pointer in CSS. There are many methods to setting up a cursor pointer in CSS. A webmaster or web developer can virtually set up unlimited amounts of pointers in CSS. Below is a list of cursor styles in CSS that you can easily implement. Hover over each one to see what they do.
- auto
- crosshair
- default
- e-resize
- grab
- help
- move
- n-resize
- ne-resize
- nw-resize
- pointer
- progress
- s-resize
- se-resize
- sw-resize
- text
- w-resize
- wait
- not-allowed
- no-drop
CSS codes for the different cursor functions.
<ul>
<li style="cursor:auto">auto</li>
crosshair">crosshair
<li style="cursor:default">default</li>
<li style="cursor:e-resize">e-resize</li>
<li style="cursor:grab">grab</li>
<li style="cursor:help">help</li>
<li style="cursor:move">move</li>
<li style="cursor:n-resize">n-resize</li>
<li style="cursor:ne-resize">ne-resize</li>
<li style="cursor:nw-resize">nw-resize</li>
<li style="cursor:pointer">pointer</li>
<li style="cursor:progress">progress</li>
<li style="cursor:s-resize">s-resize</li>
<li style="cursor:se-resize">se-resize</li>
<li style="cursor:sw-resize">sw-resize</li>
<li style="cursor:text">text</li>
<li style="cursor:w-resize">w-resize</li>
<li style="cursor:wait">wait</li>
<li style="cursor:not-allowed">not-allowed</li>
<li style="cursor:no-drop">no-drop</li>
</ul>
More Advanced CSS Cursor Pointer Features
- alias
- all-scroll
- auto
- cell
- context-menu
- col-resize
- copy
- crosshair
- default
- e-resize
- ew-resize
- grab
- grabbing
- help
- move
- n-resize
- ne-resize
- nesw-resize
- ns-resize
- nw-resize
- nwse-resize
- no-drop
- none
- not-allowed
- pointer
- progress
- row-resize
- s-resize
- se-resize
- sw-resize
- text
- Image
- vertical-text
- w-resize
- wait
- zoom-in
- zoom-out
- initial
<ul>
<li style="cursor:alias">alias</li>
<li style="cursor:all-scroll">all-scroll</li>
<li style="cursor:auto">auto</li>
<li style="cursor:cell">cell</li>
<li style="cursor:context-menu">context-menu</li>
<li style="cursor:col-resize">col-resize</li>
<li style="cursor:copy">copy</li>
<li style="cursor:crosshair">crosshair</li>
<li style="cursor:default">default</li>
<li style="cursor:e-resize">e-resize</li>
<li style="cursor:ew-resize">ew-resize</li>
<li style="cursor:grab">grab</li>
<li style="cursor:grabbing">grabbing</li>
<li style="cursor:help">help</li>
<li style="cursor:move">move</li>
<li style="cursor:n-resize">n-resize</li>
<li style="cursor:ne-resize">ne-resize</li>
<li style="cursor:nesw-resize">nesw-resize</li>
<li style="cursor:ns-resize">ns-resize</li>
<li style="cursor:nw-resize">nw-resize</li>
<li style="cursor:nwse-resize">nwse-resize</li>
<li style="cursor:no-drop">no-drop</li>
<li style="cursor:none">none</li>
<li style="cursor:not-allowed">not-allowed</li>
<li style="cursor:pointer">pointer</li>
<li style="cursor:progress">progress</li>
<li style="cursor:row-resize">row-resize</li>
<li style="cursor:s-resize">s-resize</li>
<li style="cursor:se-resize">se-resize</li>
<li style="cursor:sw-resize">sw-resize</li>
<li style="cursor:text">text</li>
url(https://a1websitepro.com/uploads/2015/05/html-150x150.png),pointer,auto">Image
<li style="cursor:vertical-text">vertical-text</li>
<li style="cursor:w-resize">w-resize</li>
<li style="cursor:wait">wait</li>
<li style="cursor:zoom-in">zoom-in</li>
<li style="cursor:zoom-out">zoom-out</li>
<li style="cursor:initial">initial</li>
</ul>
Depending on the application that you are creating make a CSS cursor that makes sense to the user. As you can see there is a wide variety of CSS Cursors that you can take advantage of. I hope you enjoyed this tutorial on Setting Up a Cursor Pointer in CSS. :-)
