[Ionic 7.6.3] ion-button with ion-badge hover border issue?

Hi Fam

I have a small issue. I am able to add a badge to a button top right with some css, however when I hover on the button, the borders of the button change from their default state. Please see the gif below.

ButtonBadge

This is the html i’m using

I have added a css rule of #button1.hasbadge::part(native) {overflow!visible}

How do I fix the border-issue on hover, everything else works as expected?

Thanks in advance.

PS: My apologies, i dont know how to embed html into this input