.rainbow-border-btn {
  background-image: linear-gradient(#000, #000),
    linear-gradient(115deg, #4fcf70, #fad648, #a767e5, #12bcfe, #44ce7b);
  background-origin: padding-box, border-box;
  background-repeat: no-repeat;
  border: 5px solid transparent;
  background-position: 0 0, 0% 50%;
  background-size: 100% 100%, 200% 200%;

  &:hover {
    animation: colorwave 3.6s ease infinite;
  }
}

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