How to create button animations with Dawn theme CSS code?

Store Design
,

Topic summary

Topic: Creating a hover animation for the “Add to cart” button in Shopify’s Dawn theme, mimicking a sliding effect seen on vixrshop.com.

Context: The Dawn theme lacks a built-in option for this animation. The requester shared a product page URL and password for review.

Proposed solution: A helper supplied CSS to be added at the bottom of base.css targeting .product-form .product-form__submit.

  • Uses a linear-gradient background split 50/50 (color/transparent).
  • Sets background-size to 200% and animates background-position on hover to create a slide.
  • On hover, the text color changes to white.

Code snippet (central to the solution): Provided CSS implements the sliding effect via background-position transition; no additional JS required.

Action items: Add the supplied CSS to base.css and test on the product page button.

Status: A clear solution was offered; confirmation of results from the requester is pending. Unanswered: Whether a white border is needed separately if not already defined by existing styles.

Summarized with AI on January 3. AI used: gpt-5.
1

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
Tokyo_Prodigy_0-1709592251668.png835×401 384 KB

Thank you in advance!

2

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?

3

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!

4

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;
}