Hi, please help me. How to remove/disable grey hover when we click button? Especially for secondary and custom button. Here’s the image of the hover. Thankyou in advance
That grey you’re seeing is almost always the theme’s own hover state — either a background-color change on :hover, or a semi-transparent overlay drawn with an ::after pseudo-element (Dawn and most Dawn-based themes do the second one).
Quick way to confirm which: right-click the button > Inspect, hover it, and look at which rule is being applied in the Styles panel. That tells you the exact selector to override.
In the meantime, this usually kills it. Add it to the bottom of your base.css (Online Store > Themes > Edit code > assets/base.css):
.button:hover,
.button–secondary:hover,
.button–tertiary:hover {
background-color: transparent;
}
.button:not([disabled]):hover::after {
box-shadow: none;
opacity: 0;
}
If it’s a custom button class rather than the theme’s default one, swap .button for your class name.
Two things that’d help me give you the exact fix: which theme are you on, and what’s the class on the button (you can see it in Inspect)? Paste that and I’ll write the exact rule.
Hi,
The grey effect in your screenshot looks like the Shopify theme editor selection overlay, not necessarily the real button hover style. The blue outline and “Add to cart” label appear when the section inspector is active.
First, open the store preview in a new browser tab and test the button outside the theme editor.
If the grey hover also appears on the live storefront, add CSS like this to your theme’s base.css, theme.css, or custom CSS area:
.button--secondary:hover,
.button--secondary:focus,
.button--secondary:active,
.custom-button:hover,
.custom-button:focus,
.custom-button:active {
background-color: inherit !important;
color: inherit !important;
opacity: 1 !important;
box-shadow: none !important;
}
You may need to replace .custom-button with the exact class used by your theme.
Best of luck.
HI @veluxe1
You can try overriding the default button style with CSS. Add the following to Online store → Themes → Edit Code → Assets → base.css (or theme.css) at the bottom:
/* Remove grey hover/active overlay from secondary & custom buttons */
.button--secondary:hover,
.button--secondary:focus,
.button--secondary:active,
.button--tertiary:hover,
.button--tertiary:focus,
.button--tertiary:active,
.button:not(.button--primary):hover,
.button:not(.button--primary):focus,
.button:not(.button--primary):active {
background-color: inherit !important;
opacity: 1 !important;
filter: none !important;
box-shadow: none !important;
}
If the grey overlay still appears, it’s likely coming from the theme’s ::before or ::after pseudo-elemment. In that case, also add:
.button--secondary::before,
.button--secondary::after,
.button--tertiary::before,
.button--tertiary::after {
display: none !important;
}
If you’re using Shopify’s Savor theme (or another OS 2.0 theme), let us know the theme name and version, as some themes implement button hover effects differently. That will help identify the exact selector causing the grey overlay.
Im on horizon theme, i’d tried your code, it works but something kinda off on check out button at cart.
Your theme is Horizon. I built, tested and verified.
That grey is the button hover state.
Horizon has no setting for it, it builds the hover colour automatically from your button colour, so a dark button turns grey.
On a phone there is no real hover, so the grey sticks after you tap until you tap elsewhere. That is why it looks like it happens on click.
Fix it with a little CSS that makes the hover colour the same as the normal colour, so nothing changes on hover or tap.
The 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);
}
Where to put it
- Online Store > Themes > the … next to Horizon > Edit code.
- Open assets/base.css.
- Paste the code at the very bottom, then Save.
That covers Add to cart, secondary and custom buttons. The grey is gone and nothing sticks after a tap.
Notes:
- Want a hover colour instead of none? Change the background line to your colour, e.g.
--button-background-color: #5c0f14; - If you update the theme later, add this again.
Tested on a Horizon store.
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.
Replace what you added with this:
.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;
}
That leaves primary and checkout buttons untouched.
If the grey is still showing on the specific button you wanted to fix, Horizon is fairly new and uses different class naming from Dawn, so I’d rather not guess. Right-click that button > Inspect, and paste me:
- the classes on the button element
- whichever :hover rule is highlighted in the Styles panel
With those two I can write the exact selector instead of a broad override. Broad overrides are what caused the checkout issue in the first place.
finally it works! thankyou youre the goat.