Button Animation With Custom Shapes

HelloToday · April 23

Hey! Looking to get some help on an issue I'm having with button animation on a site I'm building. I'm using a Flex site-wide animation which looks great and I love the hover animation action on buttons, but to achieve a consistent brand look, I need to use a custom corner radius on my buttons. When I do this the hover action for buttons reverts to a rectangle shape.

Any way to get the hover animation to match the custom shape of my buttons?

Site: https://www.teaminov8r.com/

Site password: teaminov8r

Harsh_Yadav · April 23

@HelloToday Use this CSS.

.tweak-global-animations-animation-type-flex .sqs-button-element--tertiary:hover::before {
    border-radius: 30px;
}

.tweak-global-animations-animation-type-flex .sqs-button-element--secondary::before {
    border-radius: 30px;
}

HelloToday · April 23

@HimanshuYadav Incredible! Seriously - thank you so much!

Button Animation With Custom Shapes

Recommended Posts

HelloToday

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Posted Images

Harsh_Yadav

Link to comment

HelloToday

Link to comment

Create an account or sign in to comment

News

Circle Benefits

Events

Circle Day

Resources

Product Updates

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources