[Support request] Removing animation from buttons.

Home Forums Support [Support request] Removing animation from buttons.

Home Forums Support Removing animation from buttons.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1627173
    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?

    #1627224
    Elvin
    Staff
    Customer Support

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

    A wise man once said:
    "Have you cleared your cache?"

    #1627957
    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

    #1628680
    Elvin
    Staff
    Customer Support

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

    A wise man once said:
    "Have you cleared your cache?"

    #1628699
    Ernest

    Perfect – thank you!

    #1628772
    Elvin
    Staff
    Customer Support

    No problem. 🙂

    A wise man once said:
    "Have you cleared your cache?"

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.