Weird border on button-hover animation on border-radius

Hi guys,

I’m currently experiencing a weird issue with a button animation.
The button has border-radius top-left and bottom-left.
It has a hover animation which changes the BG color and swoops in, left to right.

However on hover, there is a very small (<1px?) border on the corners where radius is applied. And it seems to be bigger on the bottom-left corner where the radius more.

It also seems the problem originates when I use the secondary button colors instead of the main button.

See the effect on the second button:

On hover

Any ideas?


Here is my site Read-Only: (Webflow - Bouwbedrijf van Emmerik)

Hi. I think it’s a normal rendering issue.
Try to include a change bg color into transparent action in the interaction. It should solve the issue.