The cursor property specifies the type of cursor to be displayed when pointing on an element. Some CSS properties are animatable, meaning that they can be used in animations and transitions.

Animatable properties can change gradually from one value to another, like size, numbers, percentage and color.

Now, when you’d like to customize a cursor, and CSS lets you do it quite easily! Click here for a list of the cursor styles supported by the CSS W3C recommendations.

CSS Custom Cursors
Rollover on the above image and see the CSS custom Cursor

 

The CSS

The cursor CSS property accepts a series of cursors, and using a url() value allows you to set a custom CSS cursor:

.heart {
          cursor:url('http://demo.web3designs.com/img/heart.ico'), default;
}

It’s always best to have a backup native cursor like default, much as you set broader font-family‘s when styling text.  Also note that Firefox scales the cursor down to a smaller size whereas Chrome currently allows a larger original size.

Now don’t go doing this willy nilly, use a custom cursor in places where you think important, like a magnifying glass + or – over zoom-able images and such.

JavaScript

If you want to change the cursor property with JavaScript then use,

object.style.cursor="crosshair"

Conclusion

That’s all, I hope you liked this article. Please feel free to comment and share your thoughts/ideas. Thanks for reading!

You can support this website by sharing. Thank you!