How to Customize the Mouse Cursor on Your Website

By April 11, 2014 No Comments

A client recently asked me to implement a custom mouse cursor on his website. I thought it was a brilliant idea, and it can really make your site unique and memorable. Here’s a step-by-step guide:

Step 1: Download Real World Cursor Editor

In order for your custom cursor to work with all browsers, you’ll need to turn your image into a special type of file called a “.cur” file. You can do this with Real World Cursor Editor, which you can download for free: Click Here.

Unfortunately, the maximum size is 32px x 32px for browser compatibility.

Step 2: Upload Your .cur File to Your Web Host

You can’t upload a .cur file through WordPress, so you’ll need to upload it directly to your web host via file transfer. Keep an eye on exactly where you upload it, because you’ll need to link to it in the next step.

Step 3: Insert This Code Into Your CSS File

body {cursor: url('YOUR .CUR URL'), auto;}

If you want the cursor image to change when hovered over a link, upload another .cur file and add this code just after the previous code:

a {cursor: url('YOUR .CUR URL #2'), auto;}

And then you’re done. Now you can impress your clients with a custom mouse cursor!


Leave a Reply