Animated Gradient Buttons

Look Demo

Add an animated gradient color style to any button block. This plugin uses css editor and works with all template families.

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.

// 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%}
}

Customize

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.

Notes

No notes.