Add To Cart Button - Pulse


1. Plugin Info

Bring attention to the add to cart button with a pulsing 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: pulse 1.5s infinite alternate; // animation duration and speed
}

// PULSING ANIMATION - ADJUST THE 100% OPTION TO CHANGE PULSING SIZE

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2); // button size during pulse animation
  }
}

3. Customizable Options

  • Animation Duration and Speed

  • Button Size During Animation


4. Plugin Notes

  • No plugin notes


Previous
Previous

Add To Cart Button - Shake

Next
Next

Shopping Cart - Rounded Product Image