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 comment
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, Delivery Date Picker, Youtube Gallery for Squarespace
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 comment

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 comment
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, Delivery Date Picker, Youtube Gallery for Squarespace
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 comment

@vennsoh Try adding to Home > Design > Custom CSS

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 year later...

Create an account or sign in to comment

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

×
×
  • Create New...