How to remove jagged border when using radial-gradient

问题

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>

回答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>

来源：https://stackoverflow.com/questions/62221293/how-to-remove-jagged-border-when-using-radial-gradient