<button>WHY CHOOSE US</button>
<button>WHY CHOOSE US</button>
<button>WHY CHOOSE US</button>
<button class="rotating">WHY CHOOSE US</button>

/* Simple button */
button {
  width: 250px;
  height: 80px;
  border-radius: 3rem;
  outline: none;
  background: black;
  border: 2px solid transparent;
  color: white;
  cursor: pointer;
}

/* Let's add a conic gradient */

button:nth-of-type(2) {
  background: conic-gradient(from 0, transparent, white 10%, transparent 20%)
    border-box;
}

/* Make conic gradient as border of the button */

button:nth-of-type(3) {
  background: linear-gradient(black, black) padding-box,
    conic-gradient(from 0, transparent, white 10%, transparent 20%) border-box;
}

/* Let's move it! */

button:nth-of-type(4) {
  background: linear-gradient(black, black) padding-box,
    conic-gradient(
        from var(--angle, 0),
        transparent,
        white 10%,
        transparent 20%
      )
      border-box;
}

body {
  min-height: 100vh;
  min-width: 100vw;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  background: #171717;
  gap: 30px;
}

document.addEventListener("DOMContentLoaded", () => {
  const element = document.querySelector(".rotating");
  let angle = 0;
  const rotate = () => {
    angle = (angle + 1) % 360; // Increment angle and keep it within 0-360
    element.style.setProperty("--angle", `${angle}deg`);
    requestAnimationFrame(rotate);
  };

  rotate();
});