Slide Arrow Button (#1) - Button Block

Bookmark Plugin

---

Plugin Details

Add an arrow icon and hover style to the button block - primary, secondary, and tertiary.

Compatibility

• Works with Squarespace 7.1

• Uses Custom CSS

• Arrow Icon Included

---

Add to Custom 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;
}

---

Apply Arrow To Button

By default, the plugin applies to the primary button block. If you want to apply it to a different button block style, use these targets instead:

• Primary Button (Default)
  .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

---

Customizable Options

• Icon Width

• Icon Height

• Left Spacing

• Default Arrow Icon URL

• Invert (Black or White)

• Left Spacing (On Hover)

• Transition Speed (On Hover)

• Remove Opacity (On Hover)

Notes

No plugin notes

Use Your Own Icon

Use CSS > Manage Files to upload and generate a file URL for your own icon. Then swap out the default icon’s URL with your file’s URL.

---