Dauer-Schimmer

Dauer-Schimmer: CSS-Button. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.

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

Ein Indigo #4f46e5 Button mit weißem Text 14px bold, 10px Radius, 13px mal 26px Padding, dessen Hintergrund ein breiter Verlauf mit einem dünnen blassen #a5b4fc Streifen ist, der alle 2.5s kontinuierlich von rechts nach links gleitet wie ein Schimmer. Hover beschleunigt den Schimmer auf 1s; active skaliert auf 97%. Fokusring halbtransparentes Indigo.

Dauer-Schimmer

Gleiches Regal