It is very common that every developer or designer focusses on the different main components of a webpage such as headers, footers, navigation drawers etc.
But they always ignore the most important element which is always there and which helps in performing almost all the listener events, it is none other than cursor. Abilities possessed by the cursor is ignored most of the time.
To make the page more attractive it is very common to design or to make the custom cursors.
Custom cursors can be created by adding a gif or a small image(approx 30px to 40px)
Through this small CSS an image appears instead of your cursor
Some inbuilt values are also used such as
cursor : cell;
cursor : crosshair;
cursor : help;
cursor : all-scroll;
cursor : wait;
These are some of the most common ones, there are approx 35 different types of the cursors available
To make the cursor more custom or add small animation, a library called cursor.css can be used.
All you have to do is to add the library by using the CDN links in your head section
And just add a div with class cursor
You can select the shape of the cursor, currently two shapes are there
<div class="cursor circle large warning none pulse outline"></div>
- circle: For circle
- outline: For the outlined circle
- pulse: For pulse animation
- warning: For orange colour
- none: For not showing the default cursor
- large: For the size of the cursor
You can also play with different classes by using this library
A small library to create custom cursors. Contribute to vaibhav111tandon/cursor.css development by creating an account…
If you like this post, please support me by pressing the 👏.