How to Add a Custom Interactive Cursor to your Squarespace 7.1 Website

One way to elevate your visitors experience on your site is by customizing your cursor!

There are many ways to do this, but in this tutorial I will outline my favorite cursor that I use on my own site, as well as implement on many of my sites. What I like about this cursor is that it changes when hovering over text and links.

Why add an interactive custom cursor?

An interactive cursor can give your site that extra flair to captivate your visitors, but only using some simple CSS code!

Show your visitors that you’ve thoughtfully crafted every aspect of their journey through your site.

Step 1: Access Your Custom CSS

1. In your Squarespace dashboard, navigate to the left sidebar under Website and click on Pages.

2. Scroll down and select Custom CSS to open the CSS editor.

Step 2: Add Your Code

Now, you’re going to add some CSS code to style your scrollbar. Don’t worry if you’re not a coding whiz – we’ll walk you through it!

1. Copy and paste the following code into the Custom CSS box:

// CUSTOM CURSOR //

//Removes default cursor//
* {
  cursor: none !important; 
  }

//Stops custom cursor from appearing on mobile//
@media ( hover: none ) {
  .cursor {
    display:none !important;
    }
  }

.cursor {
  --size: 15px; //Change this value to set your initial cursor size
  height: var( --size );
  width: var( --size );
  border-radius: 50%;
  pointer-events: none;
  position: fixed;
  transform: translate( -50%, -50% );
  z-index: 99999999999;
  }

.cursor.cursor-dot {
  background: #f7f1e9; //This defines the color of the cursor
  mix-blend-mode: difference; //Delete this line if you don't want the circle to invert
  transition: width 0.3s, height 0.3s, background-color 0.3s; //This changes the speed of the hover transition
  transition-timing-function: ease-out;
  }

.cursor-dot.active {
  --size: 75px; //Change this value to set your hover cursor size
  background-color: #f7f1e9;
  }
//End custom cursor//

2. Customize the colors to match your brand. For example, replace #f7f1e9 with your brand’s primary color.

Step 3: Preview and Save

1. Take a look at the preview of your website to see your new interactive custom cursor in action.

2. If everything looks great, click Save to apply the changes.

Adding code to your Squarespace website doesn’t need to be daunting and you can check out the rest of my Squarespace resources to help you get to grips with adding custom code to your website.

---

Frequently Asked Questions

• Will the custom cursor affect my website’s loading speed?

  No, adding a custom cursor with CSS and JavaScript has a minimal impact on your site’s loading speed.

• Can I change the shape of the custom cursor?

  Absolutely! You can modify the CSS code to create any shape you like. The example provided uses a circle, but you can experiment with other shapes.

• How do I make the custom cursor color match my brand?

  You can change the background property in the CSS code to any color that fits your brand's color scheme.

• Will the custom cursor work on all browsers?

  Yes, the custom cursor should work on all modern browsers, including Chrome, Firefox, Safari, and Edge.