How to remove jagged border when using radial-gradient - css

Question

I found this nice button on CodePen that inverts the button color with a ripple effect, using a radial-gradient animation.
I need it to have a 28px border radius, but then a jagged border appears as shown here.
html {
box-sizing: border-box;
height: 100%;
font-size: 10px;
}
*, *::before, *::after {
box-sizing: inherit;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #57bd84;
}
input[type=checkbox] {
height: 0;
width: 0;
visibility: hidden;
}
input[type=checkbox]:checked + label:after {
transform: scale(4.2);
}
label {
outline: none;
user-select: none;
color: #000;
font-family: 'Lato', sans-serif;
font-size: 2.5rem;
letter-spacing: 0.04rem;
padding: 1.5rem 3rem;
cursor: pointer;
border-radius: 28px;
border: 0.3rem solid #000;
background: #fff;
position: relative;
overflow: hidden;
box-shadow: 0 3px 0 0 #000;
}
label::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
transform: scale(0);
transition: transform 0.3s ease-in;
mix-blend-mode: difference;
background: radial-gradient(circle at center, #fff 24%, #000 25%, #000 100%);
}
label:active {
top: 3px;
box-shadow: none;
}
<input type="checkbox" id="cb1" /><label for="cb1">Toggle me</label>

Answer 1

I would do it differently using the other pseudo element where I will have the border to avoid this bad effect. I will also replace the scale transition with a background-size effect
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
font-size: 10px;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #57bd84;
margin:0;
}
input[type=checkbox] {
height: 0;
width: 0;
visibility: hidden;
}
label {
outline: none;
user-select: none;
color: #000;
font-family: 'Lato', sans-serif;
font-size: 2.5rem;
letter-spacing: 0.04rem;
padding: 1.5rem 3rem;
cursor: pointer;
border-radius: 28px;
background: #fff;
position: relative;
}
label::before,
label::after{
content: '';
position: absolute;
border-radius: inherit;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
label::after {
border:3px solid #000;
box-shadow:0 3px 0 0 #000;
}
label::before {
mix-blend-mode: difference;
background:
radial-gradient(circle at center, #fff 24%, #000 25%, #000 100%)
center/0% 0% no-repeat;
transition: background-size 0.3s ease-in;
}
input[type=checkbox]:checked+label:before {
background-size:400% 400%;
}
label:active {
transform:translateY(3px);
}
label:active::after {
box-shadow:0 0 0 0 #000;
}
<input type="checkbox" id="cb1" /><label for="cb1">Toggle me</label>