Creating a scrolling text header button in Squarespace (7.1)

• 00
• 01
• 02
• 99

There are different ways to customize the header button in 7.1 to make it more prominent.

But today, we’ll be looking into one of the most eye-catching ways we can do that, focusing on movement instead of style: by turning the text into a scrolling marquee!

The first time I saw this kind of effect was thanks to a question a member made inside the Club’s private group.

I made a mental note to create a tutorial on it back then but for some reason the idea fell into a dark corner of my mind until recently.

So, having dusted it up and brought it back to light, I present to you today: the how-to.

Enjoy!

Tutorial

Overview & timestamps

This animation is fairly simple to implement, yet not that straightforward to explain so let’s take it step-by-step and have some fun writing our code:

1. 00:00 - Intro

2. 00:54 - Looking for the target container
   Considering how we need the customization to work, the first thing we’ll do is hop onto the Inspector Tool to look for the most appropriate container.
   In this case, we’ll need to find the one that currently carries the button text so we can use it as the reference point for our “duplicate” button (i.e. the key to achieving this scrolling effect).

3. 03:50 - Creating the fake duplicate button
   With our selector in place, we’ll create a pseudo-element that holds the EXACT SAME text as the original button and turn it into an absolutely-positioned element to get everything ready for the next step.

4. 07:43 - Creating the new "collective" button background
   Since we only want the text to scroll, we’ll have to make use of a different container as our button background. Luckily, this will be super simple to style with the little variable reusing trick I’ll be showing you!

5. 11:27 - Creating the scrolling marquee effect for the button
   Finally, it’s time to implement the effect!
   We’ll create a simple keyframes animation and set it up on our original button text to get things moving. You’ll be able to adjust the timing and style of the transition based on what you prefer.

6. 15:51 - Adding the outline to the header button
   Last but not least, we’ll add a quick outline style to the header button, just because!

7. 17:03 - Adding the outline to button blocks in Squarespace
   And – because why not? – we’ll apply the same outline look to the secondary button block across the site.
   You can skip this step completely if you like, but you have to admit it looks pretty nice alongside the header button style.
   

And that’s it!

Now you have a scrolling button on your Squarespace project that’s sure to catch everyone’s attention.

Until next time,

B.

---

Full code

/*CREATING A SCROLLING TEXT HEADER BUTTON IN SQUARESPACE 7.1*/
//New button background
.header-actions-action--cta {
  background-color: var(--primaryButtonBackgroundColor);
  border-radius: 100%;
  outline: 1px solid var(--primaryButtonBackgroundColor);
  outline-offset: 2px;
  overflow: hidden;
}

//Fake button duplicate
.header-actions-action .sqs-button-element--primary::after {
  content: 'Browse our store ⇢';
  position: absolute;
  left: 100%;
  width: 100%;
}

//Scrolling animation
.header-actions-action .sqs-button-element--primary {
  animation: scrollingButton 4s linear infinite;
  background-color: transparent;
}

@keyframes scrollingButton {
  to {
    transform: translateX(-100%);
  }
}

(Optional) to style secondary buttons with outline

.sqs-button-element--secondary {
  outline: 1px solid var(--primaryButtonBackgroundColor);
  outline-offset: 2px;
}