Hover Animation Button

[veluxe1]

Hi, can anyone help me? I want to make background slide animation for hover button and i tried to add this css but it didnt work. I want to change it for my add to cart button (which i use secondary button style). The hover color that i want is black

button-secondary.button-secondary-background-slide::before {

content: ‘’;

position: absolute;

top: 0;

left: 0;

bottom: 0;

right: 0;

z-index: -1;

background-color: var(–accent-color);

transition: transform 300ms ease-in-out;

transform: scaleX(0);

transform-origin: left;

}

.button-secondary.button-secondary-background-slide:hover::before,

.button-secondary.button-secondary-background-slide:focus::before {

transform: scaleX(1);

}

.button-secondary.button-secondary-background-slide {

transition: color 300ms ease-in-out;

z-index: 1;

}

.button-secondary.button-secondary-background-slide:hover,

.button-secondary.button-secondary-background-slide:focus {

color: white;

[Ploqo]

Your Add to cart button uses the class .add-to-cart-button, and Horizon has no --accent-color variable. They don’t exist in Horizon.

After Shots (I cannot show the animation but it works)

Here black slides in from the left on hover, text turns white.

Add it once

• In your theme editor, on a product page, click Add section at the bottom of the list.
• Search Custom Liquid and click it.

• Paste this into the Liquid code box, then Save.

<style>
  .add-to-cart-button { position: relative; overflow: hidden; isolation: isolate; }
  .add-to-cart-button::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: #000;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 300ms ease-in-out;
  }
  .add-to-cart-button:hover::before,
  .add-to-cart-button:focus-visible::before { transform: scaleX(1); }
  .add-to-cart-button:hover,
  .add-to-cart-button:focus-visible { color: #fff; --button-color: #fff; }
</style>

Note

• Fill colour is background-color: #000 - change to any hex.
• Speed is 300ms - lower is faster.
• This targets the Add to cart button only.

[devcoders]

Hi @veluxe1

Try this code.

.button-secondary.button-secondary-background-slide {
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: color 300ms ease-in-out;
}

.button-secondary.button-secondary-background-slide::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 300ms ease-in-out;
}

.button-secondary.button-secondary-background-slide:hover::before,
.button-secondary.button-secondary-background-slide:focus::before {
  transform: scaleX(1);
}

.button-secondary.button-secondary-background-slide:hover,
.button-secondary.button-secondary-background-slide:focus {
  color: #fff;
}

[Custom-Cursor]

Hey @veluxe1

hope you’re doing well!

Your CSS is close, but the selector/class structure and quote characters are likely causing the issue. Also use #000 instead of the undefined --accent-color.
Try:

.button-secondary {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

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

.button-secondary:hover::before {
  transform: scaleX(1);
}

.button-secondary:hover {
  color: #fff !important;
}

If your add to cart button uses different class, inspect the button and replace -secondary with its actual class.

[veluxe1]

Thankyou so much! Also thanks to @devcoders @Custom-Cursor @ai-theme-code-editor for answering my questions. Really help me

[devcoders]

Hi @veluxe1

Thank you for your response. It’s good to know that it’s worked for you. Kindly feel free to get back to me if you need any further assistance. If helpful, please like all posts.

Best regards,
Devcoder