How to turn off default darkening effect for the buttons?

How can I turn off the default darkening effect for the buttons?

I’ve already tried CSS changes, including “target hovering the previous element and use the + selector” ( mentioned here: Add images button hover problems ), but it doesn’t work.

In my case, there are white buttons on the homepage cover image, and it looks really poorly when they become gray after the cursor guidance them:

Hi,

Please use this CSS snippet How to add custom code snippets - HivePress Help Center :

button {
	box-shadow: none !important;
}

Please note that it can require further customization.

​I hope this is helpful to you.

Nothing changed at all.

If the problem were so simple, I wouldn’t ask you for your help. I’ve already tried all possible CSS snippets (as mentioned in my first message), and nothing works.

You could try this snippet if those are the default buttons:

.button--primary, .button--secondary, button[type="submit"], input[type="submit"] {
	background-image: none;
}

.button--primary::before, .button--secondary::before {
	background-color: transparent;
}

Or this one in case of other buttons:

.button::before {
	background-color: transparent;
}

Already tried. Unfortunately, it doesn’t work : (

I applied the father theme to avoid custom styling. Here are all the mentioned CSS implementations in the father theme:

The left button is gray after the cursor guidance them in each case. That’s why I am asking for the developers’ help. The case seems more complex than one that is possible to solve with the CSS snippet.

Hi,

Please send us a link to your website, we will review it in more detail and try to help.

Here it is: listtle.com

Hi,

Perhaps you mean the hover effect, when a button is darkened on hover? @ivasav

Yes

The button becomes gray after the cursor guidance, and I need somehow to turn the effect off

Hi,

Please try this CSS snippet:

.wp-block-button__link:hover {
  background-color: transparent !important;
}

It seems that the white background disappears, and the gray shade is still there.

Changing the transparent background to white makes the full button white, including the text:

Neither option solves the button-darkening problem.

Hi,

Please send temporary WP access to support@hivepress.io with details for reproducing this issue, and we’ll check it (please send only the link, without login and password). You can create a temporary access link using this plugin Temporary Login Without Password – WordPress plugin | WordPress.org.

I sent the access in the email.

Hi,

Please use this CSS snippet:

.wp-block-button__link::before {
	background: none !important;
}

Please note that it can require further customization.

I believe this will be useful to you.

1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.