@property --angle-to-the-dangle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: true;
}

button {
  background-image: 
    linear-gradient(
      oklch(59% 56% 259deg),
      oklch(59% 56% 259deg)
    ),
    conic-gradient(
      from var(--angle-to-the-dangle),
      oklch(59% 56% 259deg) 0deg,
      white 20deg,
      oklch(59% 56% 259deg) 40deg
    );
  background-clip: padding-box, border-box;
  background-position: center center;
  background-size: 170px 500px;
  animation: rotateColors 2s linear infinite;
  border-radius: 12px;
  color: white;
  padding: 1rem 2rem;
  font-size: 1.5rem;
  border: 2px solid transparent;
}

@keyframes rotateColors {
  0% {
    --angle-to-the-dangle: 0deg;
  }
  100% {
    --angle-to-the-dangle: 360deg;
  }
}

body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  background: #222;
}