[Support request] Removing animation from buttons.

[Ernest]

Hey folks – I’m curious about a button element.

It looks like there is an animation for links and buttons in the CSS:

a, button, input {transition: color .1s ease-in-out,background-color .1s ease-in-out;}

1) Is this something that’s in the GP core CSS?
2) What’s the best way to remove it?

[Elvin]

Hi there,

a,
button,
input {
	transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out;
}

This particular CSS is added in the theme’s main.css file. But this in itself doesn’t add the animation. It’s simply for transition if/when you set a different color for hover state.

2) What’s the best way to remove it?

You can add this CSS but this only removes the transition effect. The change itself is applied on the different states of the element. (:hover, :focus, :visited and the default)

a, button, input {
    transition: none;
}

[Ernest]

That’s what I found was happening – if I have a background color / text color change on hover, there was a transition, and I wanted to remove it.

Curious that a transition would be in the main css, rather than something we can add later. Especially with Generateblocks Pro.

What would it look like to completely remove it? I’d have to include button, button:hover as well?

EDIT: The issue seems to be with: .gb-button-wrapper .gb-button

[Elvin]

What would it look like to completely remove it? I’d have to include button, button:hover as well?

If you completely remove the transition, the change would be abrupt meaning it would instantly change and most users don’t like this abrupt change. there will be no smooth transition between the changes in state.

EDIT: The issue seems to be with: .gb-button-wrapper .gb-button

You can remove the transition specifically for .gb-button by adding this css:

.gb-button{ transition: none !important; }

[Ernest]

Perfect – thank you!

[Elvin]

No problem. 🙂

[Author]

Posts