Fix text on hover button with different opacity levels

52 0 2

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;

Replies 2 (2)

Shopify Partner
349 10 38

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

Emilia7 | eFoli
-Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Checkout our apps:Inkybay || MultiVariants
52 0 2

Hi, it is

and thank you!