How to remove Flex animation from buttons?

Hi there,

I'd love to use the `flex` animation on my site as the elements load in. However I dislike how it also applies to my button's hover state.

I'm trying to figure out how I can remove the `flex` animation.

I inspect the CSS and try to override it using custom CSS but in vain.

Anyone has any ideas how to do it?

Cheers,

Venn.

1 hour ago, vennsoh said:

Hi there,

I'd love to use the `flex` animation on my site as the elements load in. However I dislike how it also applies to my button's hover state.

I'm trying to figure out how I can remove the `flex` animation.

I inspect the CSS and try to override it using custom CSS but in vain.

Anyone has any ideas how to do it?

Cheers,

Venn.

Please show your site url

I'd love to, but unfortunately, I don't have a paid subscription (can't make it public) just yet as I'm still learning and trying out squarespace.

https://dogfish-goose-f99k.squarespace.com/ <-- Don't think you can see it.

But essentially the problem is straightforward:

1) When you have Animation "Flex".

2) Hover on button will get this effect. I want to remove that hover effect.

1 minute ago, vennsoh said:

I'd love to, but unfortunately, I don't have a paid subscription (can't make it public) just yet as I'm still learning and trying out squarespace.

https://dogfish-goose-f99k.squarespace.com/ <-- Don't think you can see it.

But essentially the problem is straightforward:

1) When you have Animation "Flex".

2) Hover on button will get this effect. I want to remove that hover effect.

You can add a sitewide password 

@bangank36 Ah! Didn't know that. Thanks. (That's how noob I'm).

https://dogfish-goose-f99k.squarespace.com/ "help" is the password.

@vennsoh Try adding to Home > Design > Custom CSS

div.button-block * {
    transform: unset !important;
    transition: none !important;
    opacity: 1 !important;
}

@tuanphan How can I disable to flex button animation effect for the header button on my site? 

Site link: https://www.useinpress.com/

5 hours ago, JaydenCruzL said:

@tuanphan How can I disable to flex button animation effect for the header button on my site? 

Site link: https://www.useinpress.com/

Try this CSS

header#header a.btn {
transform: unset !important;
    transition: none !important;
    opacity: 1 !important;
}

@tuanphan The text still disappears when I hover over the button. Is there a way to fix this? Or maybe allow the animation, but change the hover background from black to grey with css?

On 1/16/2021 at 4:29 PM, JaydenCruzL said:

@tuanphan The text still disappears when I hover over the button. Is there a way to fix this? Or maybe allow the animation, but change the hover background from black to grey with css?

Looks fine here. Do you still need help?

.sqs-block-button:before {
    display:none!important;
  }

This worked for me