[React] CSS Button 테두리 효과 넣기

.GaniButton.on {
  background: linear-gradient(to right, #38bdf8, #7dd3fc, #60a5fa);
  color: #fff;
}
.GaniButton.on::before {
  content:""; // 입력필수
  position: absolute;
  top:-4px;left:-4px;right:-4px;bottom:-4px;
  background: red;
  background-size: 600% 600%;
  animation: ganiBorder 6s linear infinite;
}
.GaniButton.on::after {
  content:"";
  position: absolute;
  top:2px;left:2px;right:2px;bottom:2px;
  z-index:-1;
  border-radius: 6px;
  background: blue;
}
@keyframes ganiBorder {
  0% {background-position: 0% 50%;}
  50% {background-position: 100% 50%;}
  100% {background-position: 0% 50%;}
}