Underline Animation Not Working on Secondary Button

At a glance

The community member is having an issue with a link button on their homepage. They created an underline animation in the Style Guide that works on hover and hover out, but when they apply the same classes to the secondary button on their homepage, the animation does not work. A community member suggests that the issue may be due to the order of the classes applied to the button. They recommend changing the order from button-base button to button button-base because the styles for buttons inherit from the button class. They also suggest toggling the interaction to be by class instead of element, which should resolve the issue.

Useful resources

IIGN Interactive

Hi there,

I'm having a problem with link button. I made an underline animation in the Style Guide, that creates an animation on hover and hover out, but
when I apply the same exact classes on my homepage on the secondary button, it does not have the animation

https://preview.webflow.com/preview/m-m-dental-kft-6e1352?utm_medium=preview_link&utm_[…]d5d2b897bd&pageId=666d92d9053e96a5b30efdfc&workflow=preview

Any ideas?

1 comment

MMatt Johnson

yeah you'll want to toggle from element to class and you should be good to go.

However, I noticed that on this button you have the combo classes stacked button-base button but it should really be button button-base because all of the styles for buttons inherit from button. Once you have those combo classes fixed, when you toggle the interaction to be by class, you can target any button that has the class button to have that animation. You could use button-base to only have those buttons with that class have the animation as well. But the way you have it setup now limits what you can do and complicates your setup significantly.

Add a reply

Community forum for knowledge and support

Underline Animation Not Working on Secondary Button