Buttons always become transparent on :hover

Hello guys,

Thank you for taking a look at my post. I am having trouble with some stubborn little buttons on my webpage. Every button gets an unwanted transparent :hover effect. I know it is the following code that causes it:

.fl-page button:hover, .fl-responsive-preview-content button:hover, .fl-page input[type=button]:hover, .fl-responsive-preview-content input[type=button]:hover, .fl-page input[type=submit]:hover, .fl-responsive-preview-content input[type=submit]:hover, .fl-page a.fl-button:hover, .fl-responsive-preview-content a.fl-button:hover {
   background-color: transparent !important;
}

However, I cannot seem to get rid of it. Any suggestions?

Hi,

I think that CSS is being added by the BB Theme. Have you added a style for buttons via the WordPress Customizer?

If so, you’ll want to remove it which should resolve your issue.

What’s the link to your example page if this is still an issue?

http://golfzest.develop.pageking.nl :wink:

I’m going along with Danny here. It seems like you have a black color assigned in your theme. It’s not that you are getting transparent on :hover, but rather you have a !important > black set on hover. The “!important” is causing the issue. Do you have that set in your customizer CSS somewhere?

.fl-page button:hover, .fl-responsive-preview-content button:hover, .fl-page input[type=button]:hover, .fl-responsive-preview-content input[type=button]:hover, .fl-page input[type=submit]:hover, .fl-responsive-preview-content input[type=submit]:hover, .fl-page a.fl-button:hover, .fl-responsive-preview-content a.fl-button:hover {
    background-color: black !important;
}

You guys are right, thank you!