Here’s a simple little bit of code to make your add to cart button dance!
How is this of any use?
The button moves around and draws attention without being annoying to potential customers.
Assuming you’re using Shopify and the Brooklyn theme you would add this code into your custom.scss.liquid file.
//This is the button ID
#AddToCart {
//this calls the animation keyframes
animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
// How long the animation runs
animation-duration: 6s;
// Makes the button animate forever
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
//These are the keyframes for all the animation of the button
@keyframes shake {
from, 16%, to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
1.6%, 4.8% {
-webkit-transform: translate3d(-1px, 0, 0);
transform: translate3d(-1px, 0, 0);
}
8%, 11.2%, 14.4% {
-webkit-transform: translate3d(-4px, 0, 0);
transform: translate3d(-4px, 0, 0);
}
9.6%, 12.8% {
-webkit-transform: translate3d(4px, 0, 0);
transform: translate3d(4px, 0, 0);
}
3.2%, 6.4% {
-webkit-transform: translate3d(2px, 0, 0);
transform: translate3d(2px, 0, 0);
}
}
If you don’t have that file you would have to create it in your Assets folder and make sure you also call it by adding this line of code into your theme.liquid file.
{{ 'custom.scss.css' | asset_url | stylesheet_tag }}