Hi,
I changed the buttons hover state colour to pink, but I see a little bit of black underneath it.
It bothers me a lot 
See screenshot here:
Any ideas on how to fix this?
Website link: https://or1mgs30gcun0kys-26038403108.shopifypreview.com
Thanks!
I’ve seen that happen before, it’s usually a layering or shadow issue rather than the hover color itself. The black you’re seeing is likely coming from either a default button shadow or a border/background layer that still sits underneath.
Try adding this line to your button hover style in your CSS:
.button:hover {
background-color: pink !important;
box-shadow: none !important;
border-color: pink !important;
}
Hi @Mikkynat , thanks for your help. Unfortunately it doesn’t work 
Any other ideas on how to fix it?
Do you mind if I come in for you, you may be missing one or two.
sure, can you check this link? https://or1mgs30gcun0kys-26038403108.shopifypreview.com
Collaborator code and url ?
Ah yes 
That little black “shadow” usually comes from button borders or box-shadow that remain even after changing the hover color.
you can fix it in Shopify:
Go to Online Store → Themes → Edit code → Assets → base.css (or your theme’s CSS file).
Add this at the bottom:
/* Remove black shadow/outline on button hover */
button:hover,
button:focus,
.btn:hover,
.btn:focus {
background-color: pink !important; /* your hover color */
border-color: pink !important; /* match border to background */
box-shadow: none !important; /* remove any shadow */
outline: none !important; /* remove outline */
}
Different themes use .btn or button for buttons — the code above targets both.
If you still see the black line, inspect the button in Chrome/Firefox DevTools → check if there’s a border, box-shadow, or outline from another class, then override it with the same CSS method.
Hope this helps! If you ever need help with Shopify theme customization or store setup, I provide professional and friendly services at affordable rates. I’m here to help merchants like you while earning a livelihood. 
– Hammad | Shopify Developer
it worked! thank you so much!
Hi @hammad-ali your solution worked but I’ve realised that now every element that has a hover state it turns pink
For example:
Any ideas on how to apply your solution on buttons only?
Thanks
sharing the link again in case it expired: https://vktdjoiiv8y6olc9-26038403108.shopifypreview.com
Hi maggiebovary,
Ah, that makes sense 
— the earlier code was too broad and affected all elements with hover states.
Let’s narrow it down to only product or action buttons.
Try this instead:
/* Apply hover color only to main buttons */
button.shopify-payment-button__button,
.shopify-payment-button button,
.button,
.btn,
.product-form__submit {
transition: all 0.3s ease;
}
button.shopify-payment-button__button:hover,
.shopify-payment-button button:hover,
.button:hover,
.btn:hover,
.product-form__submit:hover {
background-color: pink !important;
border-color: pink !important;
box-shadow: none !important;
outline: none !important;
}
This targets Shopify buy/add-to-cart buttons only, leaving other hover elements (like links or icons) untouched.
Hope this helps!
If you ever need help with Shopify theme customization or store setup, I provide professional and friendly services at affordable rates. I’m here to help merchants like you while earning a livelihood. 
– Hammad | Shopify Developer
Hi maggiebovary,
did it work or not? Let me know
Add border with same color. hope it will works.
Hi, it worked with this code (I’ve just tweaked yours a bit):
.btn:hover,
.btn:focus {
background-color: #FFA8B9 ; /* your hover color /
border-color: #FFA8B9 ; / match border to background /
box-shadow: none !important; / remove any shadow /
outline: none !important; / remove outline */
}
.btn–text:focus,
.btn–text:hover{
background-color: transparent !important ;
}