Squarespace Buttons & Animations CSS Guide

Buttons and animations are where Squarespace sites either feel generic or feel custom. These 7 CSS techniques cover the most-requested button styles and animation effects — from hover colors and pill shapes to scroll-triggered fades and staggered text entrances. Each snippet goes in your Custom CSS panel (Design → Custom CSS) unless noted otherwise.

1. Change Button Hover Color

Squarespace 7.1 buttons use the .sqs-block-button-element selector with size modifiers (--small, --medium, --large). The default hover state is controlled by your site's color theme, but you can override it to any color you want. This is one of the most common customizations people ask for — matching the hover color to a specific brand palette instead of accepting the template default.

The key is adding a transition property to the base button state so the color change is smooth rather than abrupt. Without the transition, the hover color snaps instantly, which looks cheap. A 0.3-second ease timing gives a polished, intentional feel. The transform: translateY(-2px) adds a subtle lift effect that reinforces the interactivity.

Target all three size variants to ensure consistent behavior across your entire site. If you only want hover changes on specific pages, wrap the selectors with the page's body class (e.g., .collection-slug .sqs-block-button-element--medium:hover).

/* Primary button hover */
.sqs-block-button-element--small,
.sqs-block-button-element--medium,
.sqs-block-button-element--large {
  transition: all 0.3s ease !important;
}

.sqs-block-button-element--small:hover,
.sqs-block-button-element--medium:hover,
.sqs-block-button-element--large:hover {
  background-color: #c1121f !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

Result: All buttons smoothly transition to a deep red on hover, lift slightly, and gain a subtle shadow. Change #c1121f to your brand color.

2. Make Buttons Rounded (Pill Shape)

Pill-shaped buttons are a popular design trend, especially for SaaS landing pages, portfolios, and modern brand sites. Squarespace's built-in button shape control only goes so far — the "rounded" option in the style editor often isn't round enough for a true pill shape. CSS border-radius gives you full control.

Setting border-radius: 50px (or any value larger than half the button's height) creates a perfectly rounded capsule shape regardless of the button's dimensions. This works because when border-radius exceeds the element's half-height, the browser caps it at the maximum possible curvature. Using 9999px is another common approach that guarantees the pill shape at any size.

Don't forget form submit buttons and commerce buttons — these use different selectors than regular content buttons. The snippet below covers all three so your entire site stays consistent.

/* All buttons sitewide */
.sqs-block-button-element--small,
.sqs-block-button-element--medium,
.sqs-block-button-element--large {
  border-radius: 50px !important;
}

/* Form submit buttons too */
.form-submit-button {
  border-radius: 50px !important;
}

/* Commerce buttons */
.sqs-add-to-cart-button {
  border-radius: 50px !important;
}

Result:Every button on your site — content blocks, forms, and commerce — becomes a smooth pill shape. The corners are fully rounded regardless of button size or text length.

3. Add Border to Buttons (Outline / Ghost Style)

Ghost buttons (also called outline buttons) have a transparent background with a visible border. They're a design staple for secondary CTAs, pairing well alongside a solid primary button. The transparent background lets the section's background show through, which keeps the visual hierarchy clean — the solid button draws the eye first, the ghost button provides an alternative.

The hover interaction is what makes ghost buttons satisfying: on hover, the background fills with the border color and the text inverts to white. This fill effect gives strong visual feedback and makes the button feel responsive. The transition: all 0.3s ease ensures the fill animation is smooth.

The snippet below targets medium buttons specifically. If you want all buttons to be ghost-styled, add the small and large selectors. Or scope it to a specific section using a section ID to only apply the outline style in one area.

/* Outline / ghost button style */
.sqs-block-button-element--medium {
  background-color: transparent !important;
  border: 2px solid #e63946 !important;
  color: #e63946 !important;
  transition: all 0.3s ease !important;
}

/* Fill on hover */
.sqs-block-button-element--medium:hover {
  background-color: #e63946 !important;
  color: #ffffff !important;
}

Result:Medium buttons render as outlined with a red border and red text. On hover, the button fills solid red with white text — a clean, interactive ghost-to-filled transition.

4. Fade In on Scroll Animation

Fade-in animations on scroll create a storytelling feel as visitors move through your page. Content appears naturally instead of sitting static, which makes the experience feel more intentional and polished. Squarespace 7.1 has basic built-in animations, but they're limited — this approach gives you full control over timing, distance, and easing.

The technique uses the Intersection Observer API, which is far more performant than the old scroll-event approach. The observer watches for elements entering the viewport and adds a CSS class that triggers the animation. The threshold: 0.1means the animation fires when just 10% of the element is visible — adjust this value higher if you want elements to be more on-screen before they animate.

This requires both CSS and JavaScript. Add the CSS to Custom CSS and the JavaScript to Code Injection (Footer). The JavaScript adds the initial hidden state and observes all content wrappers within page sections.

CSS (goes in Custom CSS):

.page-section .content-wrapper {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.page-section .content-wrapper.is-visible {
  opacity: 1;
  transform: translateY(0);
}

JavaScript (goes in Code Injection → Footer):

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add('is-visible');
        }
      });
    }, { threshold: 0.1 });

    document.querySelectorAll('.page-section .content-wrapper').forEach(el => {
      observer.observe(el);
    });
  });
</script>

Result:Each section's content slides up 30 pixels and fades in as it enters the viewport. The animation fires once and stays visible — sections don't re-hide when scrolled away.

5. Hover Scale Effect on Images

A hover zoom effect makes images feel interactive without requiring any JavaScript. When the cursor moves over an image, it scales up slightly — mimicking a "focus" or "spotlight" behavior. This is commonly used on portfolio grids, blog post thumbnails, team photos, and product cards.

The critical detail is overflow: hiddenon the image's container. Without it, the scaled image overflows its boundaries and overlaps neighboring content. With it, the zoom stays contained within the original image frame, creating a smooth window-like effect. Keep the scale value between 1.05 and 1.1 — anything higher looks jarring and breaks the subtlety.

The snippet covers both regular image blocks and summary/card blocks. Summary blocks use a different DOM structure, so they need separate selectors. A 0.4-second transition feels natural — fast enough to respond but slow enough to be perceived as smooth.

/* Image blocks */
.sqs-block-image .image-block-wrapper {
  overflow: hidden;
}

.sqs-block-image .image-block-wrapper img {
  transition: transform 0.4s ease !important;
}

.sqs-block-image .image-block-wrapper:hover img {
  transform: scale(1.07);
}

/* Summary / card blocks */
.summary-item .summary-thumbnail-container {
  overflow: hidden;
}

.summary-item .summary-thumbnail-container img {
  transition: transform 0.4s ease !important;
}

.summary-item:hover .summary-thumbnail-container img {
  transform: scale(1.07);
}

Result: Images zoom in 7% on hover within their frame. The zoom is smooth, contained, and applies to both standalone images and blog/portfolio card thumbnails.

6. Custom Page Transitions

Squarespace 7.1 doesn't include built-in page-to-page transitions, so navigating between pages feels abrupt — a hard cut from one page to the next. Adding a simple CSS fade-in animation on the content wrapper creates the impression of smooth page transitions without any JavaScript at all. The animation runs every time a new page loads, softening the navigation experience.

The @keyframes animation defines the fade: the content starts invisible and shifted down 10 pixels, then animates to full opacity at its natural position. The animation-fill-mode: forwards(implicit in the shorthand) ensures the content stays visible after the animation completes. Keep the duration between 0.3 and 0.5 seconds — any slower and navigation feels laggy.

The header and footer are excluded from the animation because they persist across pages. Animating them would create a distracting flicker on every navigation. Only the main content area should fade, which sells the illusion of a smooth transition while keeping structural elements stable.

@keyframes fadeInPage {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.content-wrapper {
  animation: fadeInPage 0.4s ease forwards;
}

/* Don't animate the header or footer */
#header, #footer {
  animation: none !important;
}

Result: Page content fades in and slides up gently on every page load. The header and footer stay static. Visitors perceive smoother navigation between pages.

7. Animated Text Entrance

Staggered text entrance animations create a cinematic first impression. The heading appears first, then the paragraph text follows, then the button — each element sliding up and fading in with a slight delay. This technique is used heavily on high-end agency and SaaS landing pages because it guides the visitor's eye through the content in a deliberate sequence.

The stagger is controlled by animation-delay. The heading has no delay (it appears immediately), the paragraph has a 0.2-second delay, and the button has a 0.4-second delay. These intervals are close enough to feel connected but spaced enough that each element has its own moment. The opacity: 0on the delayed elements ensures they're hidden before their animation starts.

This only targets the first page section (.page-section:first-child) because entrance animations only make sense for above-the-fold content. Content further down the page should use scroll-triggered animations (see the Fade In on Scroll section above) instead of load-triggered ones.

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* First section heading */
.page-section:first-child h1 {
  animation: slideUp 0.7s ease forwards;
}

/* Stagger the paragraph */
.page-section:first-child p {
  opacity: 0;
  animation: slideUp 0.7s ease forwards;
  animation-delay: 0.2s;
}

/* Stagger the button */
.page-section:first-child .sqs-block-button-element {
  opacity: 0;
  animation: slideUp 0.7s ease forwards;
  animation-delay: 0.4s;
}

Result: The hero section heading slides up first, followed by the paragraph text 0.2 seconds later, then the button 0.4 seconds after that. Creates a polished, sequenced reveal on page load.

Related Tools