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);
  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 background 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.


Previous
Previous

Animated Gradient Header Text

Next
Next

Animated Gradient Text Logo