Fix text on hover button with different opacity levels

[tranquilweaves]

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;
}

[EFOLI-Emilia7]

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

[tranquilweaves]

Hi, it is https://tranquilweaves.com/

and thank you!