HI @veluxe1
Yes. The CSS is close, but there are a few problems in the snippet:
-
‘’ are curly quotes, so the content is invalid.
-
var(–accent-color) uses an en dash instead of –accent-color.
-
The ::before pseudo-element needs the button to have position: relative and overflow: hidden.
-
Your selector only works if the button actually has the button-secondary-background-slide class.
If you’re using Shopify’s secondary button for Add to Cart, try this:
/* Secondary Add to Cart button */
.button-secondary {
position: relative;
overflow: hidden;
z-index: 1;
transition: color 300ms ease-in-out;
}
/* Sliding black background */
.button-secondary::before {
content: "";
position: absolute;
inset: 0;
background: #000;
transform: scaleX(0);
transform-origin: left;
transition: transform 300ms ease-in-out;
z-index: -1;
}
/* Slide in on hover */
.button-secondary:hover::before,
.button-secondary:focus-visible::before {
transform: scaleX(1);
}
/* White text while hovering */
.button-secondary:hover,
.button-secondary:focus-visible {
color: #fff;
}
If you only want this on Add to Cart
I wouldn’t apply it to every .button-secondary if your theme uses that class elsewhere.
Instead, inspect the Add to Cart button in your browser and find its specific class/ID. For example, if it looks like:
<button class="product-form__submit button button-secondary">
you could target:
.
.product-form__submit.button-secondary {
position: relative;
overflow: hidden;
z-index: 1;
transition: color 300ms ease-in-out;
}
.product-form__submit.button-secondary::before {
content: "";
position: absolute;
inset: 0;
background: #000;
transform: scaleX(0);
transform-origin: left;
transition: transform 300ms ease-in-out;
z-index: -1;
}
.product-form__submit.button-secondary:hover::before {
transform: scaleX(1);
}
.product-form__submit.button-secondary:hover {
color: #fff;
}
Where to put it
In Shopify:
Online Store → Themes → … → Edit code → Assets → base.css
Paste it at the bottom of the CSS file and save.
If your theme has a Custom CSS field, you can put it there instead.
One other thing: if the button has an icon (cart icon, arrow, etc.), the z-index: -1 approach can sometimes put the animation behind the button’s own stacking context. If that happens, use z-index: 0 for ::before and give the button’s text/icon wrapper position: relative; z-index: 1.
If you tell me which Shopify theme you’re using (Dawn, Horizon, Nordic, etc.), I can give you the exact selector for its Add to Cart button rather than applying the animation to every secondary button.
