Button Animation for Dawn Theme CSS Code

Tokyo_Prodigy
Visitor
2 0 0

Hi, I'm wondering if anyone knows a code to create a button animation similar to that of https://vixrshop.com/. When I hover over the button, it should have a sliding animation that transforms the white button into a white bordered button with white text.

 

I'm using the current Dawn theme, but this isn't an animation option

Tokyo_Prodigy_0-1709592251668.png

 



Thank you in advance!

Replies 3 (3)

Dan-From-Ryviu
Shopify Partner
7545 1454 1452

Hi @Tokyo_Prodigy 

Dan here from Ryviu: Product Reviews & QA app.

 

Could you share your store URL so I can check and give the code to do that?

- Helpful? Like or Accept solution! - Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

Tokyo_Prodigy
Visitor
2 0 0

It's for the "add to cart" button on the product page: https://2580d7-4.myshopify.com/products/love-is-love-cropped-heavyweight-tee

Password: helloworld

Thank you in advance!

Dan-From-Ryviu
Shopify Partner
7545 1454 1452

Hi, please add this code at the bottom of your base.css file 

.product-form .product-form__submit {
  background: linear-gradient(to right, #855832 50%, transparent 50%);
  background-size: 200% 100%;
  background-position: right bottom;
  transition: all .5s ease-out;
}
.product-form .product-form__submit:hover {
  background-position: left bottom;
  color: #fff;
}

- Helpful? Like or Accept solution! - Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now