how to add flip effect social icon on hover cms with squarespace by jishaansinghal

In this video, I'm showing you how to add a flip effect social icon on hover on the Squarespace button with custom CSS Code!

  

How To Install:

Once a button has been added and saved, go to the Custom CSS Editor. Copy and paste the code below into the Custom CSS Editor box.

This plugin uses a CSS editor and works with Squarespace 7.1, 7.0 to add an active effect on Button on Squarespace 7.1,7.0 by jishaansinghal. This code uses a CSS editor and works with Squarespace 7.1, 7.0 templates.

You can change the animation timing or value which you wanted.

This code uses CSS editor Copy and pastes the code below into the editor box.

--------------------------------------------------------------------------------------------------------

// Flip Hover Social and header element Icons //

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

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

// Flip Over Header Button //

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

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

Customize:

You do not need to change the transform or transition values.

If you need help designing, updating, or implementing custom code on your Squarespace website, you can hire me to do so through my contact page:

Connect/Contact with me here

Fiverr       : https://www.fiverr.com/jishaansinghal

Youtube    : https://www.youtube.com/channel/UCIgDfi6qUcTmeepNJ7uqLBQ

Facebook  : https://www.facebook.com/jishaan.singhal

Twitter      : twitter.com/jishaan_singhal

Instagram : https://www.instagram.com/jishaansinghal

Linkedin    : https://www.linkedin.com/in/jishaan-singhal-1b77b2203

Blogger      : https://jishaansinghal.blogspot.com

Email         : jishaanwm21@gmail.com

Keywords:Add a button to any page with a solid or outline button style 7.0, 7.1, text issues squarespace,how to fix text issues in squarespace,fixing the text in squarespace,squarespace text block,text block squarespace,squarespace text editor,squarespace,how to use Squarespace,squarespace tutorial,squarespace tutorial for beginners,how to use Squarespace 2018,how to add text squarespace,text spacing issue squarespace,Solopreneur Sidekick #squarespace #squarespacecss #howto #customizesquarespace #css #squarespacetricks #squarespacehacks #2021 #2020#2022,squarespacewebsitedesign,squarespace,css,jishaansinghal,designer,jquery,squarespacewebsite,customcss,design,announcementbar,squarespacewebsitedesigner,animated,html,fiverr,codecheatsheet

"JISHAANSINGHAL"