Custom CSS Animated Cursor

This Post is tell how to use custom or pre-defined Cursors on your website. First of all let's start with pre-defined cursors.

Some built-in cursors

• auto
• default
• none
• context-menu
• help
• pointer
• progress
• wait
• cell
• crosshair
• text

• vertical-text
• copy
• move
• no-drop
• not-allowed
• all-scroll
• col-resize
• row-resize
• n-resize
• s-resize
• e-resize

• w-resize
• ns-resize
• ew-resize
• ne-resize
• nw-resize
• se-resize
• sw-resize
• nesw-resize
• nwse-resize

Some custom cursors using images

This is a Custom Pointer

I love India.

CSS property Cursor have above pre-defined curosors or you can set your own using url(). url allow you to set custom image to Cursor.

.class-name{
      cursor: url('custom-cursor-image-url'), auto;
}
You can also change cursor on hover

.class-name:hover{
      cursor: url('custom-cursor-image-url'), auto;
}

Read :- Shutter Page Loading effect with Jquery and CSS

Don't Forgot to Share this Post

About Author: Divy Singh Rathore

I am Founder of Codoat and live in Indore, India.
I am doing Engineering in Computer Science and like to do programming & designing.
Proud to be an Indian