Button background hover color in live site does not match editor

[MACSMosaics]

Hi folks.

My website macsmosaics uses Theme Dusk - Online Store. In the editor the buttons text is white and the background is #248d6c and when you hover the text changes to #248d6c and the background becomes transparent. The screen shot below shows the editor with a "MY ART GALLERY" button in normal color scheme and a "CLASSES" button in hover color scheme.

In the website the buttons normal color scheme is correct but when you hover the text changes to a darker green #248d6c and the background remained #248d6c. The screen shot below shows my website again with the "MY ART GALLERY" button in normal color scheme and the "CLASSES" button in hover color scheme.

As you can see when you hover the text almost disappears into the background color.

My first question is this a known bug in the theme that I am using? 

My next question is can someone tell me how to modify the HTML/CSS code so the hover background to become a 20% transparent white?

There are similar issues in the community pages but nothing exactly this issue.

Thanks in advance

Raewyn

[Adam7]

Try this in Settings > SEO > Header Code:

<style>
	span.wsite-button-inner:hover
	{
		background-color: rgba(255, 255, 255, 0.8) !important;
	}
</style>

It won't show in the editor but will on the live site. You can also change the 0.8 to affect how transparent it is. 1.0 is fully solid; 0.0 is totally transparent.

[MACSMosaics]

Thanks Adam, that worked a treat.  I also added a green border to the buttons to give them definition during hover.

Your fix also caused the Contact Form Button to turn white on hover which I do want, but the text doesn't change to #248d6c like the other buttons on the page.

Before applying your fix I had already added the code below to the Header for the Home and Contact pages to change the Contact Form Button background from grey to #248d6c.

<style>
.wsite-button .wsite-button-inner {
background: #248d6c !important;
border: none !important;
}
</style>

Do I need to add more code to this or the settings header to change the contact button hover text color as well?  If so what would you suggest.  I have already tried several different code entries to the page headers and the Settings header without success including...

.wsite-button-inner:hover {
color: #248d6c !important;
}

and...

.wsite-button:hover {
color: #248d6c !important;
}

As a bit of a noob I really appreciate the help.

Thanks again

Raewyn

[Bernadette3]

Hey there. Adam is out for his weekend, but maybe someone else with coding knowledge can take a look for you. If not I'll ask him to please take a look when he gets back in.