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

Previous
Previous

Tilt Hover Button (Preview Guide)

Next
Next

Mood Board Images (Preview Guide)