Tilt 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];
  return eiusmod.tempor(sed) ? sed : [sed];
}
    
/* ----- EXAMPLE CODE FOR PREVIEW ---- */

---

Step 2. Customizable Options

These options are available in Custom CSS.

• Tilt Speed

• Opacity Hover

• Header Button (On/Off, Tilt Degree)

• Primary Button Block (On/Off, Tilt Degree)

• Secondary Button Block (On/Off, Tilt Degree)

• Tertiary Button Block (On/Off, Tilt Degree)

• Add To Cart Button (On/Off, Tilt Degree)

• Checkout Button (On/Off, Tilt Degree)

• Member Sites Join Button (On/Off, Tilt Degree)

• Form Block Button (On/Off, Tilt Degree)

• Newsletter Block Button (On/Off, Tilt Degree)

---

Helpful Tip - Turn On / Off Tilt (Per Button)

To remove the tilt from a specific button, replace the deg value with 0deg.

For example: @header-bttn-tilt: 0deg;

---

Plugin Notes

• Hover is only compatible on desktop

• Button styles (colors, shape, etc) will be set via Squarespace button settings