Mo Bounce Social Icons

Look Demo

Give the icons in a social icons block an animated hover. This plugin uses css editor and works with all template families.

How To Install

Add a Social Links block to a page and set up the alignment and size to your liking.

Make sure the style setting is set to Regular. Once finished, hit save.

Next, go to the Custom CSS Editor. Copy and paste the code below into the Custom CSS Editor box.

// Bounce Social Icons //

@-webkit-keyframes hvr-pop {
    50% {
      -webkit-transform: scale(1.2);
      transform: scale(1.2);
    }
  }
  @keyframes hvr-pop {
    50% {
      -webkit-transform: scale(1.2);
      transform: scale(1.2);
    }
  }
  .sqs-block-socialaccountlinks-v2 a svg{
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
  .sqs-block-socialaccountlinks-v2 a{
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
  }
  .sqs-block-socialaccountlinks-v2 a:hover{
    -webkit-animation-name: hvr-pop;
    animation-name: hvr-pop;
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
  }
  .social-icons-style-regular .sqs-use--icon{
    fill: #000000 !important;
  }
  .social-icons-style-regular .sqs-svg-icon--wrapper:hover .sqs-use--icon{
    fill: #FECB2F !important;
  }

Customize

Change the fill values to the color of your choice.

License

This plugin comes with an Unlimited Use License. View License Terms