@property --rotate {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

button {
  --blue: #0173ff;
  --radius: 50px;
  --rotate: 0deg;
  padding: 20px 30px;
  border-radius: var(--radius);
  background: var(--blue);
  color: white;
  font-weight: 500;
  font-size: 30px;
  border: 0;
  position: relative;
  overflow: hidden;
  .fancy {
    position: absolute;
    inset: 0;
    &:before {
      content: "";
      background: conic-gradient(
        from var(--rotate),
        transparent 0%,
        white 5%,
        transparent 10%
      );
      position: absolute;
      inset: 0;
      animation: rotate 1s linear infinite;
    }
    &:after {
      content: "";
      background: var(--blue);
      position: absolute;
      inset: 2px;
      border-radius: calc(var(--radius) - 2px);
    }
  }
  .text {
    position: relative;
  }
}
@keyframes rotate {
  to {
    --rotate: 360deg;
  }
}

body {
  background: black;
  text-align: center;
  padding: 100px;
}