Brillo continuo

Brillo continuo: botón en CSS. Copia las reglas, o el prompt que reproduce el resultado.

CSS

.btn-072 {
  font: 700 14px/1 system-ui,sans-serif;
  color: #fff;
  background: linear-gradient(110deg,#4f46e5 40%,#a5b4fc 50%,#4f46e5 60%);
  background-size: 250% 100%;
  border: 0;
  border-radius: 10px;
  padding: 13px 26px;
  cursor: pointer;
  animation: btn-072-s 2.5s linear infinite;
  transition: transform .15s
}
@keyframes btn-072-s {
  0% {
    background-position: 100% 0
  }
  100% {
    background-position: -100% 0
  }
}
.btn-072:hover {
  animation-duration: 1s
}
.btn-072:focus-visible {
  outline: 3px solid rgba(79,70,229,.5);
  outline-offset: 2px
}
.btn-072:active {
  transform: scale(.97)
}
@media (prefers-reduced-motion: reduce) {
  .btn-072, .btn-072 * { animation: none; transition: none; }
}

HTML

<button class="btn-072">Upgrade</button>

Prompt

Un botón índigo #4f46e5 con texto blanco de 14px en negrita, radio de 10px, padding de 13px por 26px, cuyo fondo es un degradado ancho con una franja fina pálida #a5b4fc que se desliza sin parar de derecha a izquierda cada 2.5s como un destello. Al pasar el cursor el destello se acelera a 1s; en active se escala al 97%. Anillo de foco índigo translúcido.

Brillo continuo

Misma estantería