Banish That Annoying Grey Button Hover: A Shopify Community Fix for Horizon Theme & Beyond

Ever noticed that subtle, sometimes not-so-subtle, grey overlay that appears on your Shopify store's buttons? It's often most noticeable on mobile, where a quick tap can leave that grey hover effect stubbornly "stuck" until you tap elsewhere. It's a small detail, but it can absolutely detract from a polished user experience. This exact issue recently came up in the Shopify community, with a merchant named veluxe1 asking for help to remove that "grey hover when click" effect, especially on secondary and custom buttons. The thread quickly became a masterclass in community problem-solving!

Understanding the "Sticky" Hover Effect

What veluxe1 was seeing is a button's default hover state. On desktop, your mouse triggers it. But on mobile, a tap often registers as both a click *and* a hover. Since there's no "un-hover" action, the grey can linger, making buttons feel unresponsive or just plain messy. As our expert ajaycodewiz clearly explained, for themes like Horizon (which veluxe1 was using), the theme automatically generates this hover color from your button's base color. A dark button often translates to a grey hover, which isn't always the desired aesthetic.

Before diving into code, it's always good practice, as WebsiteDeveloper suggested, to confirm the issue outside the theme editor. Open your live store in a new browser tab to ensure it's a real site problem, not just an editor artifact.

The Importance of Precise CSS Targeting

One of the key takeaways from the community discussion was the critical need for precise CSS. Early attempts to fix the grey hover with broad selectors, like a generic .button:hover, led to unintended consequences. veluxe1 quickly found that this broke the checkout button, a major no-go! urezna16 quickly jumped in to clarify: "That’s my fault — the snippet I gave you was too broad. .button:hover hits every button on the site, including the checkout button, which needs its background colour. Let’s scope it properly." This is why knowing your theme's specific class names (often found by right-clicking and inspecting the element) is so incredibly valuable.

The Definitive Fix for Horizon Theme Buttons

For merchants on the Horizon theme, ajaycodewiz provided a tested and verified solution. This CSS snippet uses theme-defined variables to ensure that on hover, your buttons simply maintain their normal background, text, and border colors. No more grey, no more sticking!

Step-by-Step Guide: Remove Grey Hover in Horizon Theme

1. Access Your Theme Code: From your Shopify admin, navigate to Online Store > Themes.
2. Edit Theme Code: Locate your Horizon theme, click the … (three dots) button, and select Edit code.
3. Open assets/base.css: In the file editor, expand the Assets folder and open base.css.

   

4. Paste the CSS: Scroll to the very bottom of base.css and paste the following code:

   .button:hover,
   .button-custom:hover,
   button.shopify-payment-button__button--unbranded:hover:not([disabled]) {
     --button-background-color: var(--color-primary-button-background);
     --button-color: var(--color-primary-button-text);
     --button-border-color: var(--color-primary-button-border);
   }
   .button-secondary:hover {
     --button-background-color: var(--color-secondary-button-background);
     --button-color: var(--color-secondary-button-text);
     --button-border-color: var(--color-secondary-button-border);
   }
   

5. Save Your Changes: Click the Save button.

This comprehensive snippet targets primary, custom, Shopify payment, and secondary buttons, ensuring a consistent, grey-free experience across your store. The result? Buttons that keep their true colors, even on hover or tap! Take a look at the visual confirmation shared by ajaycodewiz:

Want a Custom Hover Color Instead?

If removing the hover effect entirely isn't your goal, but you just want a *different* color, ajaycodewiz also provided a simple modification. Instead of inheriting the original color, you can specify your own by changing the --button-background-color line:

--button-background-color: #5c0f14; /* Example: a deep red */

General Troubleshooting for Other Themes or Persistent Issues

While the Horizon fix is quite robust, if you're on a different theme or still seeing a stubborn grey on specific secondary/tertiary buttons, urezna16 offered a more general approach. This snippet targets background-color and also addresses those tricky ::after pseudo-elements that often create semi-transparent overlays:

.button--secondary:hover,
.button--tertiary:hover {
background-color: transparent;
}

.button--secondary:not([disabled]):hover::after,
.button--tertiary:not([disabled]):hover::after {
box-shadow: none;
opacity: 0;
}

And for those rare cases where ::before or ::after elements are particularly stubborn, ai-theme-code-editor suggested a stronger override using display: none !important;, though it's best to use !important sparingly to maintain CSS flexibility.

Ultimately, this community discussion beautifully illustrates how small design details can make a big difference in your store's professionalism and user experience. A clean, predictable button interaction is crucial. Remember, theme updates can sometimes revert custom code, so if that grey ever creeps back, you'll know exactly how to banish it again!