Shakey Button - Button Block

Bookmark Plugin

---

Plugin Details

Add a shakey animation to the button block – primary, secondary, and tertiary.

Compatibility

• Works with Squarespace 7.1

• Uses Custom CSS

---

Option 1: Add to Custom CSS (Animation On Loop)

// SHAKEY BUTTON - BUTTON BLOCK - GHOSTPLUGINS.COM //

.sqs-block-button .sqs-button-element--primary,
.sqs-block-button .sqs-button-element--secondary,
.sqs-block-button .sqs-button-element--tertiary
 {
  animation: shake 1.5s infinite alternate;
}

// DO NOT DELETE - SHAKE ANIMATION CODE - ADJUST THE PX OPTIONS TO CHANGE SHAKE DISTANCE //

@keyframes shake {
  0% { transform: translateX(0); }
  10%, 90% { transform: translateX(-10px); } // shake animation distance on left - keep negative
  20%, 80% { transform: translateX(10px); } // shake animation distance on right
  30%, 50%, 70% { transform: translateX(0px); }
  40%, 60% { transform: translateX(0px); }
  100% { transform: translateX(0); }
}

---

Option 2: Add to Custom CSS (Animation On Hover)

// SHAKEY BUTTON (HOVER) - BUTTON BLOCK - GHOSTPLUGINS.COM //

.sqs-block-button .sqs-button-element--primary:hover,
.sqs-block-button .sqs-button-element--secondary:hover,
.sqs-block-button .sqs-button-element--tertiary:hover
 {
  animation: shake 1.5s infinite alternate;
}

// DO NOT DELETE - SHAKE ANIMATION CODE - ADJUST THE PX OPTIONS TO CHANGE SHAKE DISTANCE //

@keyframes shake {
  0% { transform: translateX(0); }
  10%, 90% { transform: translateX(-10px); } // shake animation distance on left - keep negative
  20%, 80% { transform: translateX(10px); } // shake animation distance on right
  30%, 50%, 70% { transform: translateX(0px); }
  40%, 60% { transform: translateX(0px); }
  100% { transform: translateX(0); }
}

---

Customizable Options

• Animation Speed

• Shake Distance

Notes

Only add one of the code options.

Plugin is applying to all button block types (primary, secondary, tertiary). You can remove the ones you don’t want to target.

---