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

button {
  border: 2px solid;
  border-image-slice: 2;
  border-image-source: conic-gradient(
    from var(--angle-to-the-dangle),
    transparent 0deg,
    white 20deg,
    transparent 40deg
  );
  animation: rotateColors 4s linear infinite;

  background-color: oklch(59% 56% 259deg);
  color: white;
  padding: 1rem 2rem;
  display: inline-flex;
  gap: 0.5rem;
  font-size: 1.5rem;

  svg {
    width: 1em;
  }
}

@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;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.