Adding same a:hover effect to BUTTON in HEADER/SLIDE.

[JimWatts]

Hello, hope you are well, and thank you in advance!
www.watsinternational.com

Notice how there is no a:hover effect on the button. However, the subscribe button and every other button have like an opacity effect or something. Can someone please provide me with a code snippet to fix this. Thanks!

[paramSoft]

Please place this code at the end of theme.scss

.slides__btn:hover {
background-color: #0e124d;
}

[JimWatts]

Hello, I added your code, however it doesn't work. Please advise. 

[JimWatts]

@paramSoft 
See the image below of the achieved result. I want the a:hover effect to be the same as the button below. 

[JimWatts]

I can change the color, and it provides an a:hover effect, but it is not the same as the effect of the submit button. Please advise.
www.watsinternational.com

[paramSoft · Accepted solution]

.slides__btn:hover {
opacity: 0.8 !important;
}

[JimWatts]

Thank you. Maybe you can help me with one more issue. If I add the ahref back to the Sold Out products (which I need to so people can still view the detailed information) the a: hover effects aren't the same as the regular product units. I want it all to stay the same, but just display SOLD OUT badge in the current positon with no effects to it. How could I accomplish this with simple CSS?

I can wrap the div with <a href="{{ product.url }} </a> but the a:hover effects are not the same as a product that is in stock. 

[paramSoft]

 <a class="slides__btn" href="{{ product.url }} ></a>

[JimWatts]

Where do I put this?

[JimWatts]

 is what I am reffering to. Adding the hyperlink back to these two areas (the image and the Title) with the same a:hover effects, but the button doesn't change.