Stop the icon animation

Hi iamarghya,

In Appearance > Customize > Additional CSS, you have this custom CSS code:

.home .gb-button-wrapper .gb-button:hover .gb-icon {
    transform: translateX(8px);
    transition: all .3s ease;
}

If you remove that, the transform effect would be removed.

Kindly let us know how it goes!

but that will remove all icon's animation, I just want to remove those two icons from the animation. Besides that all will be same as it is.

I see.

You can add remove-transition-effect to the classes of the Buttons Blocks as such: https://share.getcloudapp.com/Wnu7EWwL, then, modify the code in mentioned in Appearance > Customize > Additional CSS to this:

.home .gb-button-wrapper:not(.remove-transition-effect) .gb-button:hover .gb-icon {
    transform: translateX(8px);
    transition: all .3s ease;
}

Kindly let us know how it goes.

I have given the class to the first four button and changed the CSS, but the animation doesn't seem to work...

You would need to add that class to the Buttons Blocks of the ones you wish to remove the effects for.

Can you add the class to the Buttons Blocks two icons in question are located?

oh I didn't see the not, yeah I did it. Those two icons animation stopped but the problem is because of the same class the icon from 'view All article' also stopped, They are after the ‘Popular Article’ and ‘Latest Article’ headline.

Oh. I didn’t notice that. Sorry for the back and forth.

Can you move the class to the button itself instead of the wrapper, then alter to code to this?:

.home .gb-button-wrapper .gb-button:not(.remove-transition-effect):hover .gb-icon {
    transform: translateX(8px); 
     transition: all .3s ease;
}

Kindly let us know how it goes.

Yep perfect thanks to you... There are some other problems I will create new topic for that...

You’re welcome! Glad it’s working now!

Yea closing it.