Slide Arrow Button (#1) – Add a Sleek Hover Arrow to Your Squarespace Buttons

Add a Smooth Sliding Arrow Effect to Squarespace Buttons

Want to enhance your Squarespace buttons with a clean, interactive look? This Slide Arrow Hover Effect (#1) adds a smooth, animated arrow to your buttons when hovered — helping your calls-to-action stand out and drive more clicks.

---

Plugin Details

• Works with: Squarespace 7.1

• Uses: Custom CSS

• Style: Simple, minimal sliding arrow

• Icon: Included and easily replaceable

---

Add This Code to Your Site

Paste the following into Design > Custom CSS:

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

.sqs-block-button .sqs-button-element--primary:after {
  width: 15px;
  height: 15px;
  margin-left: 5px;
  background: url(https://static1.squarespace.com/static/5ba5e044b10f25cb908c506f/t/66de25785e74a84e10708c23/1725834616316/arrow_icon.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;
}

---

Customize It Your Way

You can easily modify:

• Arrow Size (width/height)

• Arrow Spacing (before and after hover)

• Arrow Icon (change the image URL)

• Transition Speed

• Color Invert

---

Apply to Any Button Style

This plugin targets the primary button by default. Want it on other buttons? Use the right selectors:

• Primary Button: .sqs-button-element--primary

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

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

---

Give Your Buttons a Boost

This simple visual cue increases user interaction and improves your site’s overall experience. Pair this effect with strong CTA text, and your buttons will never go unnoticed again.

---

Need Help With Custom Squarespace Styling?

If you need help applying this effect or want custom-designed buttons that reflect your brand perfectly, I’m here to help!

📞 Message me 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 take your website buttons (and branding) to the next level.