How to turn off default darkening effect for the buttons?

General HivePress
1

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:

Screenshot 2024-02-20 at 13.32.43
Screenshot 2024-02-20 at 13.32.431182×604 29.4 KB

3

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.

4

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.

5

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

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:

1.
1.1920×684 64.7 KB

2.
2.1920×684 65.7 KB

3.
3.1920×684 78.7 KB

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.

9

Hi,

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

10

Here it is: listtle.com

11

Hi,

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

12

Yes

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

13

Hi,

Please try this CSS snippet:

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

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

4.
4.1920×684 66.2 KB

15

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

5.
5.1920×684 70.1 KB

Neither option solves the button-darkening problem.

17

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.

18

I sent the access in the email.

20

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
21

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

22

Apologies for this, mundane question, but my marketing person is insistent. How do I remove the box-shadow on buttons. I have tried but am not being successful.

Thank you in advance

23

Hi,

Please check the solution in this topic.