selector button {
  --speed: 1.25s;
  container-type: size;
  width: 150px;
  aspect-ratio:7 / 3;
  position: relative;
  padding: 0;
  border-radius: 999px;
  background: hsl(0 0% 10%);
  border: 0;
  overflow: hidden;
  box-shadow:
    0 1px 0 0 hsl(0 0% 100% / 0.35) inset,
    0 -1px 0 0 hsl(0 0% 0% / 0.85);
}

selector button:after {
  content: attr(data-after);
  position: absolute;
  inset: 2px;
  border-radius: 999px;
  background: hsl(0 0% 10%);
  display: grid;
  place-items: center;
  font-family: sans-serif;
  color: hsl(0 0% 90%);
  font-size: 4vmin;
}

selector .gradient {
  position: absolute;
  width: 100cqh;
  aspect-ratio: 1;
/*   background: red; */
  position: absolute;
  left: 0;
  top: 50%;
  translate: 0 -50%;
  border-radius: 50%;
  animation: slide var(--speed) ease-in-out infinite alternate;
/*   animation-timing-function: linear; */
}

selector .gradient:after {
  --spread: 90deg;
  content: "";
  position: absolute;
  inset: -100%;
  background: conic-gradient(
    from calc(270deg - (var(--spread) * 0.5)),
    transparent 0,
    hsl(0 0% 100% / 0.75) var(--spread),
    transparent var(--spread));
  animation: rotate calc(var(--speed) * 2) infinite linear;
/*   opacity: 0.25; */
}

@keyframes rotate {
  0% {
    rotate: 0deg;
  }
  15%, 35% {
    rotate: 90deg;
  }
  65%, 85% {
    rotate: 270deg;
  }
  100% {
    rotate: 360deg;
  }
}

@keyframes slide {
  to {
    transform: translate(calc(100cqw - 100%), 0);
  }
}