Add the cart button hover effect

Store Design

Topic summary

A store owner wants to add a hover effect to their “Add to Cart” button that includes scaling and a flash animation running across the button.

Solutions Provided:

Multiple developers offered CSS-based approaches using:

  • transform: scale() to enlarge the button slightly on hover (typically 1.05x)
  • A ::after pseudo-element with a linear gradient to create the flash/shimmer effect
  • CSS animations to move the gradient across the button surface

Implementation Options:

  • Add code to theme’s Custom CSS section (Theme Settings → Custom CSS)
  • Or insert into stylesheet files (base.css, theme.css, or custom.css)
  • Target selectors like .button--add-to-cart, button[name="add"], or theme-specific classes

Customization Parameters:

  • Animation speed (typically 0.3s - 0.8s)
  • Flash intensity via rgba opacity values
  • Scale magnitude for zoom effect

Status: Multiple working code snippets provided. Some developers requested collaborator access to implement directly, though the discussion remains open for the store owner to test solutions.

Summarized with AI on October 24. AI used: claude-sonnet-4-5-20250929.
1

Hi, i want to create a hover effect for my add to cart button that will make the button scale a bit and flash running over the button
thank you in advance.

store link : breshofficial . com

pass: hugegyat

1 Like
2

Hey @Bresh_store,

Adding the flash effect on the Button while hovering on it requires to do the custom code in your theme file. Could you please share the 4 digits collab code in the p/m so that I can take a look into it and do the requested changes.

Thanks

3

im not sure where is the DMS in shopify community, so i sent it to u on your WhatsApp number xd

4

You can achieve that hover effect using a mix of CSS scale transform and a subtle flashing animation overlay. Try adding something like this to your base.css or custom CSS file:

.button--add-to-cart {
  position: relative;
  transition: transform 0.25s ease;
  overflow: hidden;
}

.button--add-to-cart:hover {
  transform: scale(1.05);
}

.button--add-to-cart::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.4), transparent);
  transition: all 0.5s ease;
}

.button--add-to-cart:hover::after {
  left: 100%;
}

What this does:

  • Slightly scales the button when hovered

  • Creates a light “flash” animation that sweeps across the button

If you’re using a theme where .button--add-to-cart is named differently, just inspect your button element and replace that class name accordingly.

If you’d like, I can quickly check your theme structure

Let me know and I’ll be happy to adjust it for you

5

Hi @Bresh_store

Ok dear, please share your store URL and collaborator code with me so I can check and provide you with the proper solution.

6

You can add this in your theme’s Custom CSS section:

Online Store → Themes → Customize → Theme Settings → Custom CSS

—or—

in your stylesheet (usually base.css, theme.css, or custom.css).

/* — Add to Cart Button Hover Effect — */
button[name=“add”],
.shopify-payment-button__button,
button.add-to-cart {
position: relative;
overflow: hidden;
transition: transform 0.3s ease;
}

/* Scale on hover */
button[name=“add”]:hover,
.shopify-payment-button__button:hover,
button.add-to-cart:hover {
transform: scale(1.05);
}

/* Shimmer/Flash effect */
button[name=“add”]::after,
.shopify-payment-button__button::after,
button.add-to-cart::after {
content: “”;
position: absolute;
top: 0;
left: -75%;
width: 50%;
height: 100%;
background: linear-gradient(
120deg,
rgba(255,255,255,0) 0%,
rgba(255,255,255,0.6) 50%,
rgba(255,255,255,0) 100%
);
transform: skewX(-20deg);
}

/* Animation on hover */
button[name=“add”]:hover::after,
.shopify-payment-button__button:hover::after,
button.add-to-cart:hover::after {
animation: shine 0.8s forwards;
}

@keyframes shine {
0% {
left: -75%;
}
100% {
left: 125%;
}
}

:gear: How it Works

  • The transform: scale(1.05) slightly enlarges the button when hovered.

  • The ::after pseudo-element creates the shiny “flash” overlay.

  • The shine keyframes move the gradient across the button for that running light effect.

:puzzle_piece: Optional Tweaks

You can adjust:

  • The speed → change .8s in animation: shine 0.8s;

  • The intensity → edit rgba(255,255,255,0.6) (reduce the alpha for a subtler effect)

  • The scale size → e.g., transform: scale(1.1) for more dramatic zoom.

If you share your theme name (e.g., Dawn, Impulse, Prestige, etc.),

I can tailor the selector (since some themes wrap the Add to Cart button differently, e.g. .product-form__submit in Dawn).