Solved

Button hover animation stuck on grow?


Beginner here! I am having issues with disabling the "Hover Animation" from my buttons (all buttons). Regardless, whether I have the animation set to none or anything else, the button grows when hovering over it. I'm sure that I'm overlooking something, but any advice would be greatly appreciated.
Thanks in advance!

icon

Best answer by Doug O'Dell 7 June 2021, 21:17

View original

15 replies

Userlevel 6
Badge +3

Hi @DougO Design welcome to Community.

The Hover Effects https://elementor.com/help/hover-effects/ can be disabled in https://elementor.com/blog/v05-box-shadow-animations/

May be you have a WooCommerce site? in that case try to read this stackexchange post  https://wordpress.stackexchange.com/questions/346560/how-to-disable-the-hover-effect-in-wordpress-and-elementor on that they presente a CSS fix or also this stackoverflow post https://stackoverflow.com/questions/26754497/css-disable-hover-effect ever with others CSS suggests.

Userlevel 6
Badge +6

Hi @DougO Design Many themes overrides some styling options in Elementor (fonts, headings, buttons, colours … )

 

Try to go to Elementor/Settings and un-check this two option for colours and fonts 

 

Then open any of your pages with Elementor and click  bars in the upper left corner of the screen. This will lead you to a Settings panel, click on the Site settings options and under the Theme styles go to Buttons. There you can customise the look and feel of your buttons through the site.

Thank you for your replies! So far, none of the suggestions have worked in disabling the “grow” hover animation. There seems to be a “default” setting that I am unable to override or change.

I am using Elementor’s Hello theme and building my site from scratch, rather than utilizing the templates in hopes of better understanding how Elementor works.

Here’s what I’ve tried without success:

  • Enabling and disabling default colors and fonts in Elementor settings
  • Deleting the button and creating a new one
  • Changing hover animations (grow precedes any selected animation)

When I edit the button and select “hover,” the animation shows “None” but still grows. Regardless which animation effect I select from the dropdown, the button grows prior to any selection including “None.”

For reference, I do not have this issue on another site that I’m working on using Elementor and the Hello theme. I’m sure I inadvertently changed something to cause this issue, but I have no idea what I did.

Thanks again.

Update: Although I have solved the problem of the mysterious button hover animation by resetting the website I’m working on, I never figured out what I did to cause the issue in the first place.

So, I’m still very interested in any theories you all might have.

I look forward to learning from this community initially, and eventually contributing as I become more proficient using Elementor.

 

Userlevel 6
Badge +3

Update: Although I have solved the problem of the mysterious button hover animation by resetting the website I’m working on, I never figured out what I did to cause the issue in the first place.

So, I’m still very interested in any theories you all might have.

I look forward to learning from this community initially, and eventually contributing as I become more proficient using Elementor.

 

Hi @Doug O'Dell thankyou for your reply and for your solution also if has been a reset of site.

@Doug O'Dell 

I am having the same issue with the same theme and nothing has worked.  The only thing I can think of is that  I have a little css to hide text on hover, but idk how that would grow buttons on hover :)

Do you mind telling me or pointing me in the right direction to “reset” the site?  I’m new to Elementor and that sounds terrifying.   Thank you!

Badge +1

Would love to have an answer to this. Also using Hello Theme.

Did find this

.noHover{
    pointer-events: none;
}

but of course, it makes the button quit working …

Elementor - we need a fix please.

 

currently checking out this link for a possible answer
https://stackoverflow.com/questions/26754497/css-disable-hover-effect

Badge +1

Same problem here… Hello Theme, Woocommerce ...non of the linked solutions did work for me...

Same issue. It will be great to have a solution to this, since it is quite a basic functionality for a web page. I am using Elementor with Hello Theme.

Same issue. It will be great to have a solution to this, since it is quite a basic functionality for a web page. I am using Elementor with Hello Theme.

In addition to the Grow effect on Hover, my font in the name of the button is also changed.

Badge +1

I might have found some kind of solution:

The strange hover setting was connected to the global settings of Typography → LInks → Global Font setting for links. This hover setting for links was wrongly connected to the hover settings for buttons. The thing is you can not actually set any hover font settings in the global settings for buttins). So I had to delete the specific elementor global font-size variable connected to this hover state for links which than would also be deleted for all buttons.

That fixed it for me. But I have to set the links-hover state manually now.

So basicly the problem is that Elementor mixes the typography settings for links with those for buttons in a bad way.

To be fair: The issue might has to do something with Style Kits by analogwp. After testing some settings I deleted the plugin again … so maybe… but that is just a guess.

 

That worked, thanks!

Badge

Finally i fixed it, thank you!

Badge +1

 This worked for me as well. I was having trouble with the social icons widget and it fixed that too. Thanks Sascha.

 

Un grand merci.

Reply