Tired of That Grey Button Hover? A Shopify Community Fix for Horizon Theme & Beyond!

Hey there, fellow store owners! Ever noticed that little grey overlay or highlight that appears when you hover over a button on your Shopify store, or worse, sticks around after you tap it on your phone? It's a common, subtle detail, but one that can really throw off your brand's aesthetic and user experience. Sometimes, it's just not the look you're going for, especially when your buttons are meant to be sleek and seamless.

Recently, I was sifting through the Shopify community forums, and a thread titled "Remove grey hover when click" immediately caught my eye. It started with veluxe1 asking for help to disable this grey hover effect, particularly on secondary and custom buttons. They even shared an image showing exactly what they meant, and honestly, it's a look many of us have wanted to tweak.

Understanding the "Grey Hover" Phenomenon

What exactly causes this? As the community experts pointed out, it's usually your theme's default hover state. For themes like Horizon, which veluxe1 was using, this hover color is often automatically generated from your button's normal color. So, a dark button might naturally turn grey on hover. On desktop, it's a fleeting moment, but on mobile, where there's no true "hover" state, that grey can stick around after a tap until you tap elsewhere. This makes it look like it happens "on click." Another possibility, as WebsiteDeveloper noted, is that sometimes what you're seeing is the Shopify theme editor's selection overlay, not the live site's actual hover effect. Always a good idea to check your live store preview first!

The Community's Journey to a Solution

The discussion in the thread was a fantastic example of collaborative problem-solving. Initially, members like urezna16 and ai-theme-code-editor offered broad CSS snippets targeting generic button classes like .button:hover, .button--secondary:hover, and .button--tertiary:hover, often suggesting background-color: transparent !important; or even hiding pseudo-elements like ::before and ::after which can sometimes draw these overlays.

However, veluxe1 quickly reported a common pitfall: "Im on horizon theme, i'd tried your code, it works but something kinda off on check out button at cart." This is a crucial piece of feedback! Broad overrides can inadvertently affect critical elements like your checkout button, which definitely needs its own styling intact.

urezna16 gracefully acknowledged this, explaining that their initial snippet was "too broad," hitting every button. This led to a refinement, emphasizing the need for more scoped CSS. But it was ajaycodewiz who truly nailed the Horizon theme-specific fix, providing a robust solution that addressed the nuances of Horizon's styling and the mobile tap issue.

The Horizon Theme Solution: Making Hover "Invisible"

The key insight from ajaycodewiz was that Horizon builds its hover color automatically. Instead of trying to make it transparent, the most effective approach is to make the hover state's colors identical to the button's normal state colors. This way, nothing visibly changes on hover or tap, effectively "removing" the grey without making things disappear entirely.

Here's the code that veluxe1 confirmed worked, and it covers your Add to Cart, secondary, and custom buttons, ensuring the grey is gone and nothing sticks after a tap.

Step-by-Step Instructions:

1. Access Your Theme Code: From your Shopify admin, go to Online Store > Themes.
2. Edit Code: Find your Horizon theme (or whichever theme you're using), click the … (three dots) button next to it, and select Edit code.
3. Open base.css: In the file editor, open the assets/base.css file. This is where most of your theme's core styles reside.
4. Paste the Code: Scroll to the very bottom of the base.css file and paste the following CSS 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 in the top right corner.

After implementing this, your buttons should maintain their chosen color without the unwanted grey overlay on hover or tap:

Important Notes for Customization and Updates

• Want a different hover color? If you decide you do want a specific hover color instead of none, you can simply change the --button-background-color line in the code. For example, to make it a deep red: --button-background-color: #5c0f14;
• Theme Updates: Remember that if you update your Shopify theme later, this custom code might be overwritten. It's a good practice to keep a record of your custom CSS snippets so you can easily re-add them if needed.

This whole thread really highlights the power of the Shopify community. From the initial question to the iterative solutions and the final, successful fix, it shows how store owners and developers come together to fine-tune every aspect of their online presence. It's these small tweaks that contribute to a polished, professional-looking store, enhancing your customers' experience and reflecting your brand's attention to detail. If you're still thinking about diving into the world of e-commerce or upgrading your current setup, remember that having this kind of control over your store's aesthetics is just one of the many reasons why merchants choose Shopify.