Add a custom cursor to a Squarespace website
Custom cursors are Squarespace web design marmite. Some people love them, thinking they look cool and add a unique and edgy design feature to a website, whilst some people hate them, claiming them to be pointless and a hindrance to the user experience.
If you do want to add a custom cursor to your Squarespace website, doing so is actually easier than you might think. All you need to do is upload the cursor you want to your custom CSS. Let’s take a look…
Watch the video
Check out the YouTube video below 👇
How to add a custom cursor to a Squarespace website
Before we get started there’s a couple of things you need to note about adding a custom cursor. Firstly, your chosen cursor can’t be any larger than 30px X 30px and secondly if you want your cursor to change when it hovers over something, you’ll need to add two different images for your cursor.
To add a custom cursor to your Squarespace website, head to your edit dashboard and navigate to your custom CSS panel.
You then need to add in the following code:
body {
margin: 0;
height: 100vh;
cursor: url(https://static1.squarespace.com/static/63bbd740ee52826f06ff2fec/t/64623d4fa9c1370de3445dfc/1684159823209/Untitled+design-min+%281%29.png), auto; /*REPLACE THIS URL*/
}
a:hover{
cursor: url(https://static1.squarespace.com/static/63bbd740ee52826f06ff2fec/t/64623d12b409d5032eb5b7f7/1684159762363/Untitled+design+%281%29+%281%29.png), auto; /*REPLACE THIS URL*/
}
The first section refers to the cursor as you move around the site, the second section is for the cursor that’s shown when a user hovers over something clickable.
📩 Join the inner circle to get exclusive code updates
Choose your custom cursor image and your hover custom cursor image (usually the hover version will be the same as the main custom cursor, just with a slight difference such as a change of colour or an image flip).
Within your custom CSS panel, select Manage Custom Files and upload both your cursor images.
Then, simply click inside the brackets of your code and select the relevant image from the gallery, this will add the URL of the image in and set your custom cursor.
Hit save and you’ll have added a custom cursor to your Squarespace website. See, I told you it was easy!
Your designer
I'm Sam, an award-winning Squarespace web designer. I have worked with every type of business, building platforms for solo entrepreneurs through to multi-million dollar corporations. If you want to discuss a potential project, you can email on sam@bycrawford.com or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.