How can I add a shake feature to call to action buttons?

[Kris-Tech]

Hi

Can someone help me with shaking some call to action buttons for me please

I need to add a shake add to cart on all product pages eg: 

https://techfirmstore.com/collections/home-tools/products/wired-wireless-gsm-home-burglar-security-a...

And also I will like to add the shake feature on the reveal offers button which appears on selected pages

Thanks

[Guleria · Accepted solution]

Hello @Kris-Tech ,

Follow these steps:

1. Go to Online Store -> Theme -> Edit code

2. Open your theme.css file and paste the following code below:

button.add-to-cart, .ufe-floating__btn { 
  animation-name: shake;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in;
  cursor: pointer;
position: relative;
}
button.add-to-cart:hover, .ufe-floating__btn:hover {
  animation-name: shakeAnim;
}

@keyframes shakeAnim {
  0% {left: 0}
  1% {left: -3px}
  2% {left: 5px}
  3% {left: -8px}
  4% {left: 8px}
  5% {left: -5px}
  6% {left: 3px}
  7% {left: 0}
}

@keyframes shake {
  0% {left: 0}
  1% {left: -3px}
  2% {left: 5px}
  3% {left: -8px}
  4% {left: 8px}
  5% {left: -5px}
  6% {left: 3px}
  7% {left: 0}
}

Thanks

[Kris-Tech]

Thank you, worked perfectly!

[Dhwanit]

In edit code I don't have theme.css file

[nits]

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