Slide Arrow Button Hover Effect for Squarespace 7.1 Buttons

Enhance Your Squarespace Buttons with a Sliding Arrow Hover Effect

Want to give your Squarespace buttons a more interactive and modern feel? The Slide Arrow Hover Effect (#2) is a simple way to add visual engagement and draw attention to your calls to action.

This plugin adds a clean sliding arrow to your button blocks, offering a subtle yet stylish hover animation for primary, secondary, and tertiary button types in Squarespace 7.1.

---

How It Works

This CSS plugin:

• Adds a right-pointing arrow icon after your button text

• Slides the arrow to the right when hovered

• Removes the native button opacity hover for better clarity

• Is fully customizable (icon size, spacing, speed, etc.)

---

How to Add the Slide Arrow Button Effect

Paste the following code into your Custom CSS section in Squarespace:

css
// SLIDE ARROW ON HOVER (#2) - BUTTON BLOCK - GHOSTPLUGINS.COM //

.sqs-block-button .sqs-button-element--primary:after {
  width: 20px;
  height: 20px;
  margin-left: 5px;
  background: url(https://static1.squarespace.com/static/5ba5e044b10f25cb908c506f/t/66de32957fb7944840939042/1725837973168/arrow_2.png) center center no-repeat;
  filter: invert(1);
  background-size: contain;
  content: "";
  vertical-align: middle;
  transition: ease-in-out all 0.2s;
  display: inline-block !important;
}

// ARROW ICON SPACING ON HOVER - BUTTON BLOCK - GHOSTPLUGINS.COM //

.sqs-block-button .sqs-button-element--primary:hover:after {
  margin-left: 20px;
  transition: ease-in-out all 0.2s;
}

// REMOVES NATIVE ON HOVER OPACITY - BUTTON BLOCK - GHOSTPLUGINS.COM //

.sqs-block-button .sqs-button-element--primary:hover {
  opacity: 1 !important;
}

---

Customization Options

You can easily modify:

• Arrow size (width & height)

• Spacing (default and on hover)

• Transition speed

• Arrow icon URL

• Filter invert (for black/white arrow)

---

Apply to Any Button Style

By default, the plugin targets primary buttons. You can also use it with other styles:

css
Primary Button:
.sqs-block-button .sqs-button-element--primary

Secondary Button:
.sqs-block-button .sqs-button-element--secondary

Tertiary Button:
.sqs-block-button .sqs-button-element--tertiary

Just replace .sqs-button-element--primary with the one you want to customize.

---

Make Your CTAs Stand Out

Using animated icons like sliding arrows increases button visibility and encourages clicks — a perfect upgrade if you want to improve conversions or modernize your Squarespace site.

---

Need Help With Custom Buttons or Full Website Design?

As a Squarespace expert, I can help you implement custom features like these or redesign your site for better SEO, design, and performance.

📞 Let’s chat on WhatsApp: https://wa.me/+8801717691382
📅 Book a free consultation: https://calendly.com/website_consultation/meeting
🌐 View my portfolio: https://www.squarespacewebexpert.com/

Let’s make your website more powerful and personalized.