How to change the mouse cursor

The mouse cursor changes all the time on many websites depending on what you’re hovering over. It suggests the way you can interact with an element such as a field which will accept text, or an element you can click and drag.

It can also be changed to simply look cool. Maybe it will compliment the design of your site.
It’s also worth noting that not all cursor changes will be compatible with various browsers and platforms. However the code below should work for all major (and latest versions of) desktop web browsers.

It’s very easy to change the cursor using CSS.

See the Pen The Cursors! by Chris Coyier (@chriscoyier) on CodePen.0

You can also change the standard mouse cursor by simply defining the image file in CCS like this:

.custom {
  cursor: url(images/cursor.png), auto;

Remember the point of the cursor will likely be in the top left as default.



Web Designer / Graphic Designer based in London.
This site is my own personal reference to all things Wordpress and web design, which I hope will also help others.
Let me know if you have any questions!


Leave a Reply

Your email address will not be published. Required fields are marked *