Pulsing Button

---

Description

Add a clean pulsing effect to any button block size. 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.

// Pulsing Button Block //

.sqs-block-button .sqs-block-button-element--medium {
box-shadow: 0 0 0 0 rgba(88, 120, 243, 0.4);
-moz-animation: pulse 2s infinite;
-webkit-animation: pulse 2s infinite;
animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(88, 120, 243, 1);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(88, 120, 243, 0);
    }
    100% {
        box-shadow: 0 0 0 50px rgba(88, 120, 243, 0);
    }
}

---

Customize

To change the main color of the button, go to Site Styles.

To change the pulsing color, adjust the box shadow colors to your liking under @keyframes. Be sure to keep the opacity how it is (the 1 and 0 at the end of the rgba color). Do not change any other values.

If you want to target a small or large button, replace .sqs-block-button-element--medium with either .sqs-block-button-element--small or .sqs-block-button-element--large.

---