Flip Over Social Icons + Header Button

---

Description

Add a flip over hover effect to header social icons and button. This plugin uses css editor and works with Squarespace 7.1.

---

How To Install

From your Squarespace account, go to the Custom CSS Editor. Copy and paste the code below into the Custom CSS Editor box.

// Flip Over Social Icons //

.header-actions .header-actions-action--social a {
  transform: scaleX(1) !important;
  transition: all ease-in-out .5s !important;
}

.header-actions .header-actions-action--social a:hover {
  transform: scaleX(-1) !important;
  transition: all ease-in-out .5s !important;
}

// Flip Over Header Button //

.header-actions .header-actions-action--cta a {
  transform: scaleX(1) !important;
  transition: all ease-in-out .5s !important;
}

.header-actions .header-actions-action--cta a:hover {
  transform: scaleX(-1) !important;
  transition: all ease-in-out .5s !important;
}

---

Customize

Adjust the transition timing values to your liking.

Social icons and header button can be enabled in header settings.

---