Button animation

Hi there,

The icon moves through transform: translateX(8px); code on hover.

Then, this code transition: all .3s ease-in-out; defines its transition.

Hope this clarifies. :)

Where to put that? can u get me full CSS for one button from my website

I can move the icon but I want to move the icon when the whole button is hovered

Hi there,

can you share a link to the page on your website where we can see the button with the icon ?

Oh sorry, I forgot that I didn't share my link.😓

So you have this CSS:

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

You need to move the :hover pseudo state to the button like so:

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

Perfectly worked Thanks.

Glad to hear that