Custom Squarespace Buttons with CSS Micro-Interactions

Add refined motion to your Squarespace buttons with simple CSS micro-interactions that sync perfectly with your site’s theme.

Why Custom Buttons Matter

Squarespace buttons are clean and functional, but a little motion can take them from simple to refined. Small hover animations—known as micro-interactions—add a layer of polish that makes your site feel more custom and intentional. They guide attention, add feedback, and give your site a sense of personality.

In this post, I’m sharing all the code featured in my YouTube video “Elevate Squarespace Buttons with Simple Micro-Interactions.” Each example uses your site’s built-in theme variables, so colors and styles stay perfectly in sync.

Working with Squarespace Buttons

By default, Squarespace includes three button types:

• Primary
• Secondary
• Tertiary

Each button type uses its own CSS class, which we can target for styling. Here’s the basic structure:

.sqs-button-element--primary {}
.sqs-button-element--secondary {}
.sqs-button-element--tertiary {}

.sqs-block-button-element {}

All of the effects below can be added inside your Custom CSS panel in Squarespace.

Interaction 1: Scale Up

Let’s start with a simple hover interaction that gently scales the button up and adds a subtle shadow. This creates the illusion of lift and makes the button feel more responsive.

/* Primary Button */
.sqs-button-element--primary {
  transition: all 0.2s ease all;
}

.sqs-button-element--primary:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

This approach keeps your original hover color intact while adding a smooth, tactile feel.

Interaction 2: Swipe Fill

Next, let’s create an animated fill effect that sweeps across the button from left to right. This one uses a pseudo-element (:before) positioned behind the button’s text.

/* Secondary Button */
.sqs-button-element--secondary {
  position: relative;
}

.sqs-button-element--secondary:hover {
  background: transparent !important;
}

.sqs-button-element--secondary:before {
  content: "";
  position: absolute;
  inset: 0 0 0 0;
  z-index: -1;
  background: var(--secondaryButtonBackgroundColor);
  transform: scaleX(0);
  transform-origin: 0 0;
  transition: transform 0.2s ease;
}

.sqs-button-element--secondary:hover:before {
  transform: scaleX(1);
}

This keeps everything tied to your existing theme colors using the built-in --secondaryButtonBackgroundColor variable.

Interaction 3: Rotate Background

For the tertiary (link-style) button, we can use a 3D flip motion that feels dynamic yet refined. It’s built on the same pseudo-element technique but uses rotation instead of scaling.

/* Tertiary Button */
.sqs-button-element--tertiary {
  position: relative;
  perspective: 100px;
}

.sqs-button-element--tertiary:hover {
  background: transparent !important;
  border-color: var(--tertiaryButtonBackgroundColor) !important;
}

.sqs-button-element--tertiary:before {
  content: "";
  position: absolute;
  inset: 0 0 0 0;
  z-index: -1;
  background: var(--tertiaryButtonBackgroundColor);
  transform: rotateX(110deg);
  transform-origin: 0 100%;
  transition: transform 0.2s ease;
}

.sqs-button-element--tertiary:hover:before {
  transform: rotateX(0deg);
}

The perspective property gives this motion a realistic 3D feel, and because it uses your theme’s color variable, it always matches your brand palette.

Adding Active States & Mobile Feedback

To make these interactions feel natural on mobile and when clicked, let’s add a pressed state. This creates the sense of the button being pushed down slightly when tapped.

/* All Buttons */
.sqs-block-button-element:hover {
  transition: all 0.2s ease !important;
  transform: scale(1.05);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.sqs-block-button-element:active {
  transform: scale(.98);
}

Now your buttons give tactile feedback on both desktop and mobile.

Wrap-Up

When done intentionally, small micro-interactions make your Squarespace site feel handcrafted without heavy code. These subtle enhancements stay synced with your theme, elevate the design, and improve the user experience.

You can copy any of the snippets above directly into your Custom CSS panel in Squarespace. To see these animations in action and get a full walkthrough of how they work, watch the video below.