<button class="border-gradient">
  WHY CHOOSE US
</button>

@import url("https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,500&display=swap");

.border-gradient {
  --c: #171717;
  --p: 10%;
  background: linear-gradient(var(--c), var(--c)) padding-box,
    conic-gradient(
        from var(--gradient-angle, 0deg),
        transparent,
        white var(--p),
        transparent calc(var(--p) * 2)
      )
      border-box;
  border: 1px solid transparent;
}

button {
  width: 250px;
  height: 80px;
  border-radius: 3rem;
  color: white;
  font-size: 1rem;
  font-family: "Inter", sans-serif;
}

html,
body {
  height: 100%;
}

body {
  display: grid;
  place-items: center;
  background: #0a0a0a;
}

document.addEventListener("DOMContentLoaded", () => {
  const element = document.querySelector(".border-gradient");

  let angle = 0;
  const rotateGradient = () => {
    angle = (angle + 1) % 360; // Increment angle and keep it within 0-360
    element.style.setProperty("--gradient-angle", `${angle}deg`);
    requestAnimationFrame(rotateGradient); // Smooth animation loop
  };

  rotateGradient(); // Start the animation
});