How to remove the opacity hover effect for buttons in Elementor (free, no coding)

You also don't want a transparency effect when you hover over buttons? In this video I show you, how you can simply remove this effect with a little bit of CSS. Neither coding skills nor any plug-ins/Elementor Pro are required.

Insert this CSS to your Customize Menu under "Additional CSS" or in your free plug-in "Simple CSS":

a:not(.btn):not(.button):not(.added_to_cart):hover {
opacity: 1;
}

If this does not work for your website, I show you in the video how you find the line of code yourself:
1. Visit your page as normal (not in Elementor)
2. Right click on one of the buttons - do NOT click on the text in the button, but on the area around it
3. Select "Inspect element"
4. Select ":hov" in the top menu bar
5. Tick the box "hover"
6. Scroll down and search for the code, which defines the opacity value (see above)
7. Untick it to see, whether it actually turns off the opacity hover effect
8. Copy and paste the snippet to your "Additional CSS" field in your Customize Menu
9. Change the opacity value from 0.75 to 1.0, if you don't want to have any opacity effect
10. Publish
You're done!

Please comment to tell me, if it also works for you :-)

[gillsaint]

This video is useful especially if you want to change a specific area not the whole website. Thanks

[aceofdiamond]

will this work for the texts part? because I've got the same thing but instead of buttons its on the texts

[developernerds]

Mine was actually the box shadow. So i set it to none and it went away for the buttons i needed it for! I use the customify theme and jetengine for my post types and forms and it was happening on the x to remove a repeater field. Just in case anyone has the same issue, I used the selector set that to box-shadow: none; and it will stop doing that.

[atifmunirkhan]

it helped me but now text got off set line