(Only CSS,HTML) animated gradient borders

HTML

<div class="button">
  <div class="button-inner">
    <span>GRADIENT</span>
  </div>
</div>

CSS

@keyframes
=> css 애니메이션 시퀀스 세부 단계 설정하고 싶을 때

배경색으로 gradient로 잡아 놓고,
그 위에 inner 클래스에 배경색을 black으로 덮은 뒤,
:hover하면 배경색을 transparent를 줘서 gradient를 보여줄 수 있게 인터랙션 구현

* {
  font-family: 'Roboto', sans-serif; 
}

html, 
body {
  background-color: black;
}

.button {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 150px;
  height: 50px;
  /* border: 1px solid white; */

  /* https://gradienthunt.com/ */
  background: linear-gradient(
    -45deg,
    #3f51b1 0%,
    #5a55ae 13%,
    #7b5fac 25%,
    #8f6aae 38%,
    #8f6aa4 50%,
    #cc6b8e 62%,
    #f18271 75%,
    #f3a469 87%,
    #f7c978 100%
  );
  background-size: 400%;
  animation: animate 5s infinite;
}

@keyframes animate {
  0% {
    background-position: 0%;
  }
  50% {
    background-position: 100%;
  }
  100% {
    background-position: 0%;
  }
}

.button-inner {
  position: absolute;
  left: 2px;
  top: 2px;
  right: 2px;
  bottom: 2px;
  background-color: black;
  color: white;
  text-align: center;
  line-height: 46px;
  cursor: pointer;
  transition: 0.5s;
}

.button-inner:hover {
  background-color: transparent;
  transition: 0.5s;
  color: black;
}

참고

HTML / CSS: Create Animated Gradient Borders