How to shake Add To Cart button on Crave theme

Store Design
1

Hello. How can I shake the Add to Cart button on Crave theme? I’ve been checking the board, but the answer is not for Crave theme. I saw this site, but not sure where to put: “Shake” CSS Keyframe Animation | CSS-Tricks - CSS-Tricks

Please help. Thank you

2

Hi @hobimetoyshop ,

Please follow the instructions below.

  1. Go to Admin > Online store > Themes > Actions > Edit code
  2. Go to Asset folder, and open the base.css file
  3. Add the code below.
.product-form__submit:hover {
animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}

@keyframes shake {
10%, 90% {
transform: translate3d(-1px, 0, 0);
}

20%, 80% {
transform: translate3d(2px, 0, 0);
}

30%, 50%, 70% {
transform: translate3d(-4px, 0, 0);
}

40%, 60% {
transform: translate3d(4px, 0, 0);
}
}
1 Like
3

Amazing! Thank you so much!

1 Like
4

Another options is shopify app https://apps.shopify.com/shake-add-to-cart-button