Easy custom cursor for specific elements or sections in Squarespace

If you like the idea of applying a custom cursor to your client’s site but you also want to have control over where it displays, this tutorial is for you.

Using just an image file and a few lines of CSS, we’ll look into how to target links, buttons, navigation items, and individual sections like the footer area.

This method is perfect if you want to add something more than (or instead of) a hover mode, but only have a few minutes to spare.

So, without further ado, let’s get into it.

Tutorial

Overview & timestamps

1. 00:00 - Intro & customization overview

   Let’s first take a look at the final result we’ll be achieving today and see what’s needed to make it happen on our client project.

1. 00:44 - Preparing the cursor + targeting basic link elements
   With our chosen 32x32 px custom file in place (this is my bullseye image in case you want to use it), the next step is to simply pick where we want the cursor to show up. In the first example, we’ll target all <a> elements.

2. 02:27 - Fixing cursor alignment

   Next, we’ll see how we can adjust the position of the image so that whichever part of it we want to set as the center, sits there. In my case, I’ll use 18 and 18 as the coordinates, just because math wasn’t mathing at this point.

3. 03:15 - Targeting stubborn clickable elements

   Then, we’ll take a look at why some clickable elements aren’t displaying the cursor and what to do about them. We’ll see how even links of seemingly the same kind are built differently, and how to target them correctly to apply the same customization.

4. 09:52 - Targeting specific sections and their clickable content

   Last but not least, we’ll see what’s needed to target entire sections AND stubborn elements inside them that may already be displaying a cursor of their own.

And just like that, now you have full control over where your client’s custom cursor shows up!

You can have fun with this and implement different cursor images for different sections, or – if you’re rather looking to simplify the process – take advantage of the automatic plugin that targets all kinds of clickable elements for you, to speed up your workflow.

Hope you liked this one!

Until next time,

B.

---

Full code

Custom CSS Window

/*EASY CUSTOM CURSOR FOR SPECIFIC ELEMENTS OR SECTIONS IN SQUARESPACE*/
//Example 1
a {
  cursor: url("CURSOR.png") 18 18, auto;
}

//Example 2
a,
button,
.summary-carousel-pager-next {
  cursor: url("CURSOR.png") 18 18, auto !important;
}

//Example 3
#footer-sections,
#footer-sections a {
  cursor: url("CURSOR.png") 18 18, auto;
}