Slide Arrow Button (#2) - Button Block
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 (#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; }
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--primarySecondary Button
.sqs-block-button .sqs-button-element--secondaryTertiary 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.