Animated Gradient Buttons

 

Animated Gradient Buttons

Follow the simple steps below for a quick install. This plugin works with all template families.


Submitted by Moov Labs

 
 

Look Demo

AnimatedGradientLogoText.gif

Step One

From your Squarespace account, go to the Custom CSS Editor: Design > Advanced > Custom CSS

Step Two

Copy and paste the code below into the Custom CSS Editor box.

// Animated Gradient Button //

.sqs-block-button .sqs-block-button-element--medium {
  background: linear-gradient(-45deg, #53D6FF, #666BE1, #E45372, #F07C63) !important;
  background-size: 400% !important;
  -webkit-animation: Gradient 10s ease infinite !important;
  -moz-animation: Gradient 10s ease infinite !important;
  animation: Gradient 10s ease infinite !important;
}

// Animation Keyframes //

@-webkit-keyframes Gradient {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@-moz-keyframes Gradient {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@keyframes Gradient { 
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

Step Three

Change the #53D6FF, #666BE1, #E45372, and #F07C63 color values to the colors of your choice.

The code works for the medium button block. If you want to modify a small or large button, replace .sqs-block-button-element--medium with .sqs-block-button-element--small or .sqs-block-button-element--large.

Do not change any values to the Animation Keyframes.

Save and refresh the page. 👍

Moov Labs