Add To Cart Button - Shake

---

1. Plugin Info

Bring attention to the add to cart button with a shaking animation.

• Works with Squarespace 7.1

• Uses Custom CSS

• Compatible with all Product Layouts

---

2. Add this code to Custom CSS

// ADD TO CART BUTTON - PULSE ANIMATION - GHOST PLUGINS //

.sqs-add-to-cart-button {
  animation: shake 1.5s infinite alternate; // animation duration and speed
}

// ADD TO CART BUTTON - SHAKE ANIMATION - GHOST PLUGINS //

.sqs-add-to-cart-button {
  animation: shake 1.5s infinite alternate;
}

// SHAKE ANIMATION - ADJUST THE TWO 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); }
}

---

3. Customizable Options

• Animation Duration and Speed

• Animation Distance (Left / Right)

---

4. Plugin Notes

• No plugin notes

---