how to make a custom cursor for your squarespace site
When it comes to having a great website, the devil is in the details! I like to find little things to make my site more enjoyable to interact with, and having a custom cursor can be a really simple and fun way to spruce things up. In this tutorial, I’ll take you through a simple method of implementing a custom cursor into your website. And we will be using Illustrator to create the design for the cursor. So if you’re ready to get fancy, let’s get going!
Step 1: Designing your cursor
As with all design projects, you’ll want to get inspired. The possibilities are endless, so be sure to find an idea that you really like. I’m a minimal girl, so I went with a cute little red heart.
“When it comes to having a great website, the devil is in the details! ”
We’re gonna take to illustrator to craft our cursor. I made my canvas 30px wide by 30px high. Then w'e’re gonna make a heart. (Check out the video to see how I created the heart shape!) I then set the stroke width to 1pt and the stroke color to #e22b64. Make sure your design is aligned to the center of the artboard using the align panel. That’s it! You can make your cursor as simple or as complex as you want- use your imagination! Once you’ve finished your design, export it as a PNG with a transparent background. Now we can move onto actually implementing our work into our site.
Step 2: Adding your cursor to Squarespace
We will only need use a little bit of CSS for this, so non-coders can relax!
First things, first, we need to upload our PNG to a hosting site so that we can get the image link for our code. I used imgbb.com, a free image hosting site. Upload your image and then get your image link (make sure the dropdown is set to "HTML Full Linked”). Next, select out the part of your link that I’ve highlighted in the example image below, (not including the quotation marks) and paste it into the code I’ve provided below.
body { cursor: url(YOUR LINK HERE) 15 15, move; }
Take the updated code and paste that into the Custom CSS dialogue in the design panel. Save your work and watch the magic happen!
I hope this tutorial was helpful. Let me know if you have any questions and what you want to learn next!
-Nia