Squarespace 7.1Effects & Interactions

Button Flip - Horizontal

By Will's Toolkit

$15.00
Button Flip - Horizontal snippet from Will's Toolkit, preview from the Code Catalog – Squarespace Effects & Interactions on SquareLocator
Fit check
Great for
Creative Studios
Personal Brands
Event Planners
Agencies
Know before you buy
  • Members-only code: you need an active Will's Toolkit subscription to see and copy it
  • Needs a Squarespace plan that allows custom code
  • A styling snippet rather than a configurable plugin, so changes beyond the design shown mean editing CSS
Version7.1
SetupEasy

Overview

Button Flip - Horizontal is a button snippet from Will's Toolkit that flips a Squarespace button around its vertical axis on hover to reveal a second label. In Will's animated preview a "Get in touch" button turns sideways and comes back reading "Let's go!", then flips back when the cursor leaves.

What you get

  • CSS and code for a horizontal 3D flip on button hover
  • A second label revealed on the back of the button
  • Access to the full Will's Toolkit Code Catalog with membership

Who it suits

Sites that want a playful call to action without a full animation library: creative studios, event and hospitality brands, personal brands. Best used on one or two key buttons rather than every button on the page.

Honest limits

  • Members-only code: you need an active Will's Toolkit subscription to see and copy it
  • Needs a Squarespace plan that allows custom code
  • A styling snippet rather than a configurable plugin, so changes beyond the design shown mean editing CSS
  • Hover effects are mostly a desktop experience; touch screens show the front label

How it is delivered

This snippet sits in the Code Catalog of Will's Toolkit, Will Myers' membership for Squarespace designers, and is marked members only. Membership is $15 a month or $150 a year and includes the full Code Catalog, the Toolkit browser extension, the Robo-Will AI assistant, the Slack community and 20 per cent off Will's plugins. Snippets are copy and paste code added to your site. Will's catalogue lists it under Buttons, last updated 4/30/2025.

Related guide: browse every plugin we list in the Squarespace plugins collection, or read our roundup of the best Squarespace plugins in 2026.

Button Flip - Horizontal is a hover effect for Squarespace buttons from Will's Toolkit. When a visitor hovers, the button rotates side to side and reveals a second label on the back, so a "Get in touch" button can become "Let's go!" as the cursor lands on it.

It is a small, memorable touch for a key call to action. Like any hover effect it is mainly a desktop experience, and it works best used sparingly. A vertical variation is also in the Toolkit.

It is part of Will's Toolkit, Will Myers' membership for Squarespace designers, rather than a one-off purchase. Membership costs $15 a month or $150 a year and unlocks the full Code Catalog of more than 100 snippets, the Toolkit browser extension, the Robo-Will AI assistant, a Slack community and 20 per cent off Will's paid plugins.

The honest caveats: the code is members only, it needs a Squarespace plan that allows custom code, and as a styling snippet it does one job well rather than offering a settings panel. Anything beyond the design shown means editing the CSS yourself.
What it does
  • Flips a button horizontally on hover
  • Reveals an alternative label on the reverse side
Full specifications

FAQs

FAQs

What does Button Flip - Horizontal do?
On hover the button rotates side to side and shows a second label on its reverse, as in Will's preview where "Get in touch" becomes "Let's go!".
How is it different from Button Flip - Vertical?
The horizontal version rotates the button side to side. The vertical version flips it top to bottom.
Does it work on mobile?
Hover effects depend on a pointer, so on touch screens visitors will mostly see the front label.
How do I get this snippet?
Join Will's Toolkit, Will Myers' membership, at $15 a month or $150 a year. The snippet is in the members-only Code Catalog along with over 100 others.
How is it installed?
It is copy and paste code. You add it to your Squarespace site, then adjust colours or sizes in the CSS if you want to match your brand.
Do I need a particular Squarespace plan?
You need a plan that allows custom code. The Toolkit is built for Squarespace 7.1.