Barrido de brillo

Barrido de brillo: botón en CSS. Copia las reglas, o el prompt que reproduce el resultado.

gradient-border animatedroundedconicmonochromeproperty

CSS

@property --a105 {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg
}
.btn-105 {
  position: relative;
  font: 600 14px/1 system-ui,sans-serif;
  letter-spacing: .02em;
  color: #f8fafc;
  background: #1e293b;
  border: 0;
  border-radius: 12px;
  padding: 13px 26px;
  cursor: pointer;
  isolation: isolate
}
.btn-105::before {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: 13px;
  background: conic-gradient(from var(--a105),#475569 0 40%,#f8fafc 50%,#475569 60% 100%);
  z-index: -1;
  animation: sweep105 2.5s linear infinite;
  animation-play-state: paused
}
.btn-105::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #1e293b;
  z-index: -1
}
.btn-105:hover::before {
  animation-play-state: running
}
.btn-105:focus-visible {
  outline: 2px solid #f8fafc;
  outline-offset: 3px
}
.btn-105:active::after {
  background: #0f172a
}
@keyframes sweep105 {
  to {
    --a105: 360deg
  }
}
@media (prefers-reduced-motion: reduce) {
  .btn-105, .btn-105 * { animation: none; transition: none; }
}

HTML

<button class="btn-105">Continue</button>

Prompt

Un botón pizarra #1e293b, radio de 12px, texto blanco roto #f8fafc de 14px semibold, padding de 13px por 26px, con un borde de 1.5px #475569 salvo por una cuña brillante #f8fafc. La cuña recorre el borde (2.5s por vuelta) solo mientras hay hover, usando animation-play-state paused/running sobre un ángulo @property. En active el interior se oscurece a #0f172a; foco con outline blanco de 2px y offset de 3px.

Barrido de brillo

Misma estantería