A user applied CSS code to reduce button opacity on hover but encountered an unintended side effect: the button text opacity also decreased. They want only the background box opacity to change while keeping the text fully visible.
Current CSS implementation:
.button.button--primary has opacity: 0.5.button.button--primary:hover has opacity: 1Issue: The opacity property affects both the button background and text simultaneously.
A community member requested the store URL to examine the implementation and provide a targeted solution. The user shared their Shopify store link (tranquilweaves.com). The discussion remains open, awaiting technical guidance on separating text and background opacity controls.
Hi this is the code I have used in my theme CSS. So now the opacity is lower and you can hover over them. However the texts opacity has also gone lower, which I did not want. I only wanted the background box of the button to have lower opacity and the text still be visible. Would appreciate some help please!
.button.button–primary {
opacity: 0.5;
transition: opacity 0.5s ease;
}
.button.button–primary:hover {
opacity: 1;
}
Hello @tranquilweaves ,
Please share the store URL (storefront password if your store is password protected) so that I can check and provide you with a possible solution.
Thank you
Hi, it is https://tranquilweaves.com/
and thank you!