How to Create Custom Cursor Using Html and CSS

cursor is used to change the mouse cursor on specific elements. This is especially useful in web apps where different tasks can be done other than clicking. This obviously only works when there’s a pointing device.

In this tutorial, we will see how to Change Cursor Style Using Its Properties In CSS. There is a lot of option to use those cursor for particular elements on your web page.

Cursor

The cursor CSS property specifies the mouse cursor displayed when the mouse pointer is over an element.

Creating a Customized Cursor

It is also possible to have completely customized cursors.

The cursor property handles a comma-separated list of user-defined cursors values followed by the generic cursor. If the first cursor is specified incorrectly or can't be found, the next cursor in the comma-separated list will be used, and so on until a usable cursor is found.

If none of the user-defined cursors is valid or supported by the browser, the generic cursor at the end of the list will be used instead.

cursor:url(//3.bp.blogspot.com/-ZNLpDxAZl-U/Txfy-htSSUI/AAAAAAAAEu0/6xx10FyZu_s/cursor.png),default;

cursor:url(http://cursors2.totallyfreecursors.com/thumbnails/1pointer31.gif), auto;

cursor:url(https://cursors3.totallyfreecursors.com/thumbnails/bluemultiglit.gif), auto;

Pointer

a:hover{cursor:url(//3.bp.blogspot.com/-DsgX285Mtcw/U_XKwHV6O1I/AAAAAAAAIH0/SWSkno0447s/cursor.png),default}

a:hover{cursor:url(https://cursors0.totallyfreecursors.com/thumbnails/blueglitbusy.gif), auto; }

Limitations

All image formats supported by Gecko can be used. This means that you can use PNG, GIF, JPG, BMP, CUR, etc. images. ANI is not supported. An animated PNG or GIF will not create an animated cursor.

Browser compatibility

IE9 and earlier versions only support URL values of the type .cur for static cursor, and .ani for animated cursor. However, browsers such as Firefox, Chrome and Safari have support for .cur, .png, .gif and .jpg but not .ani.