Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

How to remove Flex animation from buttons?


Recommended Posts

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.

Link to post
  • Replies 9
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

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

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/ <

Looks fine here. Do you still need help?

Posted Images

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

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement, Enable Pinch/Zoom on lightbox, 360 degree photo blockSortable Table from GSheet
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post

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.

image.png.5876aefe6acf263a3c235a0499c24a70.pngimage.png.a24f5f22b78c9965b9c9a123571d30ab.png

Edited by vennsoh
Link to post
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.

image.png.5876aefe6acf263a3c235a0499c24a70.pngimage.png.a24f5f22b78c9965b9c9a123571d30ab.png

You can add a sitewide password 

image.png.b0fa62957ee2d6b6ffeef77fc1901984.png

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement, Enable Pinch/Zoom on lightbox, 360 degree photo blockSortable Table from GSheet
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post

@vennsoh Try adding to Home > Design > Custom CSS

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

 

Link to post
  • 4 weeks later...
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;
}

 

Link to post
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?

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...