Grow Hover Button (Preview Guide)
New! Plugin Pack
A plugin pack helps had new styles to multiple, similar elements at once for quicker and easier customization. If there is a button you’d like added in a future update, let us know.
Super Plugin Info
Works with Squarespace 7.1
Requires Personal Plan or Higher
Uses CSS Editor
Hover Only Compatible On Desktop
Step 1. Add This Code To Custom CSS
/* ----- EXAMPLE CODE FOR PREVIEW ---- */ function lorem(ipsum, dolor = 1) { const sit = ipsum == null ? 0 : ipsum.sit; dolor = sit - amet(dolor); return sit ? consectetur(ipsum, 0, dolor < 0 ? 0 : dolor) : []; } function adipiscing(...elit) { if (!elit.sit) { return []; const sed = elit[0]; dolor = sit - amet(dolor); return eiusmod.tempor(sed) ? sed : [sed]; } /* ----- EXAMPLE CODE FOR PREVIEW ---- */
Step 2. Customizable Options
The options are available in Custom CSS.
Grow Hover Speed
Opacity On Hover
Header Button (On/Off, Grow Size)
Primary Button Block (On/Off, Grow Size)
Secondary Button Block (On/Off, Grow Size)
Tertiary Button Block (On/Off, Grow Size)
Add To Cart Button (On/Off, Grow Size)
Checkout Button (On/Off, Grow Size)
Member Sites Join Button (On/Off, Grow Size)
Form Block Button (On/Off, Grow Size)
Newsletter Block Button (On/Off, Grow Size)
Helpful Tip - Turn On / Off Grow (Per Button)
To turn the grow animation off for a specific button, change the default value to 0.
Plugin Notes
Hover is only compatible on desktop
Button styles (colors, shape, etc) will be set via Squarespace button settings