Transparent Button on Hover with Flex Animation

Hi,

I was wondering if there is a way to change the hover animation when using the "Flex Animation" so that my buttons are transparent on hover instead of changing the background to the text color. I've attached a screen recording below. I want the button to be transparent on hover instead of black.

If there's any way to achieve this effect in Squarespace, that'd be awesome.

Thanks!

Hi,

What is site url? We can check easier

29 minutes ago, tuanphan said:

Hi,

What is site url? We can check easier

Hi, the site is starvedrockphotographer.com/homepage-draft

On 7/26/2023 at 10:05 AM, imdanielduncan said:

Hi, the site is starvedrockphotographer.com/homepage-draft

Add this to Design > Custom CSS

.button-block a:hover, .button-block a:hover:before {
    background-color: transparent !important;
}

11 hours ago, tuanphan said:

Add this to Design > Custom CSS

.button-block a:hover, .button-block a:hover:before {
    background-color: transparent !important;
}

 

Hi, thanks for responding!

That makes the button transparent, but is there a way to turn the button to an outline? (I've attached a screen recording in case my explanation wasn't good) Right now there's also a weird animation when I hover over/away from the button. Is there any way to make the animation look like the screen recording I've attached? The screen recording is from another page on the site. The animation on hover is from using the "flex" site-wide animation so is there a way to just default the animation to that?

Thanks!

Here's what I'd like the animation to look like as well as the "outline" on hover:

Screen Recording 2023-07-26 at 11.15.09 PM.mov 

Here's what it looks like currently:

Screen Recording 2023-07-26 at 11.13.35 PM.mov  

Try this code

.button-block a:hover, .button-block a:hover:before {
    background-color: transparent !important;
}
.button-block a:hover {
    border: 2px solid white !important;
}

2 hours ago, tuanphan said:

Try this code

.button-block a:hover, .button-block a:hover:before {
    background-color: transparent !important;
}
.button-block a:hover {
    border: 2px solid white !important;
}

 

Hi,

Thanks for getting back to me! That makes the button an outline as I'd like, but it still doesn't have the same animation as the "flex" site-wide button animation. I've attached a screen recording below. If there's any way I can default the animation to the site-wide one, that'd be great.

Thanks!