How to create a flip effect on social media icons and button on Squarespace 7.1

This tutorial will show you how to create a flip effect to the social media icons and button on your site navigation. Note this only applies to the desktop navigation.

Complexity: Easy

---

Step 1

Simply copy the css code below. Then head to ‘Design’ and then ‘Custom CSS’ and paste the code.

// Flipping Social Icons //

.header-actions .header-actions-action--social a {
  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;
}

// Flipping Header Button //

.header-actions .header-actions-action--cta a {
  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;
}

---

Step 2

You can change transition speed values to your liking

---

If you have any questions or need any help with your Squarespace website design, you can book a 1:1 consultation.

---

All work in this guide is provided ‘as-is’. Other than as provided in this agreement, this guide makes no other warranties, expressed or implied, and hereby disclaims all implied warranties, including any warranty of fitness for a particular purpose.

If you require professional advice, we recommend that you purchase the services of a developer.