[Resolved] Button animation

[iamarghya]

On that website page, on 5th no. container there is a button with icon animation can u tell me how can I copy those settings?

[Fernando]

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. 🙂

[iamarghya]

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

[iamarghya]

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

[David]

Hi there,

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

[iamarghya]

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

[David]

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;
}

[iamarghya]

Perfectly worked Thanks.

[David]

Glad to hear that

[Author]

Posts