Button hover animation border glitch

Hi :slightly_smiling_face:

I’ve made this button animation for a project, but for some reason there is a pixel issue at both ends of the button at the borders when the green color fills the button.

Skærmbillede 2024-09-19 163609
Skærmbillede 2024-09-19 163555

Anyone who has seen this before and know a fix for it?


Here is my public share link: [LINK](Webflow - Ole Larsen Wireframes)
(how to access public share link)

Have had the exact same problem and tore my hair out for hours to figure it out.

Best thing I’ve found is changing your overflow back to visible and sticking this in your global styles embed

.button-class{
mask-image: radial-gradient(circle, white 100%, black 100%);
}

If I remember right, it works a bit weirdly on mobile, so best to unset it below tablet and put overflow: hidden back on. But when you’re tapping buttons, the hover state animation doesn’t matter so much anyway

1 Like