# Hover Animation Button

**URL:** <https://community.shopify.com/t/hover-animation-button/662042>\
**Category:** Store Design\
**Tags:** design, css\
**Created:** [August 8, 2026, 7:37am UTC](https://community.shopify.com/t/hover-animation-button/662042 "2026-08-08T07:37:22Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![veluxe1](https://avatars.discourse-cdn.com/v4/letter/v/ecd19e/32.png) [@veluxe1](https://community.shopify.com/u/veluxe1)\
**Post date:** [August 8, 2026, 7:37am UTC](https://community.shopify.com/t/hover-animation-button/662042/1 "2026-08-08T07:37:22Z")

</div>

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;

---

<div class="post-metadata">

**Author:** ![Ploqo](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/ploqo/32/398219_2.png) [@Ploqo](https://community.shopify.com/u/Ploqo)\
**Post date:** [August 8, 2026, 10:07am UTC](https://community.shopify.com/t/hover-animation-button/662042/2 "2026-08-08T10:07:41Z")

</div>

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.

 ![Before - plain Add to cart button](https://canada1.discourse-cdn.com/shopifyforum/original/4X/c/6/2/c62de45c57ec442642e51f84528c92c9bbbd3570.png)

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

 ![After - black slides in on hover, white text](https://canada1.discourse-cdn.com/shopifyforum/original/4X/1/8/b/18bd24664b21fb2b7b21fe0f745a1ddd5c23de2e.png)

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.

 ![Add section, then Custom Liquid](https://canada1.discourse-cdn.com/shopifyforum/original/4X/d/c/0/dc0408c7fb97a77c78e54721cbdc51c09a8ad51d.jpeg)

- Paste this into the **Liquid code** box, then **Save**.

```liquid
<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>

```

 ![Paste into Liquid code and Save](https://canada1.discourse-cdn.com/shopifyforum/original/4X/0/9/6/09641040e446d4c9d7c3b6187dd7053a312d49ed.jpeg)

**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.

---

<div class="post-metadata">

**Author:** ![devcoders](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/devcoders/32/403479_2.png) [@devcoders](https://community.shopify.com/u/devcoders)\
**Post date:** [August 8, 2026, 11:10am UTC](https://community.shopify.com/t/hover-animation-button/662042/3 "2026-08-08T11:10:01Z")

</div>

Hi @veluxe1

Try this code.

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

```

---

<div class="post-metadata">

**Author:** ![Custom-Cursor](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/custom-cursor/32/401636_2.png) [@Custom-Cursor](https://community.shopify.com/u/Custom-Cursor)\
**Post date:** [August 8, 2026, 3:48pm UTC](https://community.shopify.com/t/hover-animation-button/662042/5 "2026-08-08T15:48:56Z")

</div>

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:

```auto
.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.

---

<div class="post-metadata">

**Author:** ![veluxe1](https://avatars.discourse-cdn.com/v4/letter/v/ecd19e/32.png) [@veluxe1](https://community.shopify.com/u/veluxe1)\
**Post date:** [August 9, 2026, 4:03pm UTC](https://community.shopify.com/t/hover-animation-button/662042/6 "2026-08-09T16:03:36Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![devcoders](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/devcoders/32/403479_2.png) [@devcoders](https://community.shopify.com/u/devcoders)\
**Post date:** [August 9, 2026, 4:30pm UTC](https://community.shopify.com/t/hover-animation-button/662042/7 "2026-08-09T16:30:49Z")

</div>

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 💻**

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/shopifyforum/original/4X/7/b/b/7bbfe07c91e3f502d9c876612b0b445245662ef9.png) [@system](https://community.shopify.com/u/system)\
**Post date:** [August 11, 2026, 4:31pm UTC](https://community.shopify.com/t/hover-animation-button/662042/8 "2026-08-11T16:31:00Z")

</div>

Closed on August 11, 2026, 4:31pm UTC

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.