Ghost Plugins

View Original

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

See this content in the original post

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