Aurora-Drift

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

CSS

.btn-136 {
  font: 700 15px/1 system-ui,sans-serif;
  color: #fff;
  text-shadow: 0 1px 2px #0004;
  background: radial-gradient(at 20% 30%,#f0abfc 0,transparent 50%),radial-gradient(at 80% 20%,#67e8f9 0,transparent 50%),radial-gradient(at 60% 90%,#a78bfa 0,transparent 55%),#6d28d9;
  background-size: 200% 200%;
  border: 0;
  border-radius: 999px;
  padding: 15px 32px;
  cursor: pointer;
  animation: drift136 6s ease-in-out infinite alternate;
  transition: transform .2s
}
.btn-136:hover {
  transform: scale(1.04);
  animation-duration: 2.5s
}
.btn-136:focus-visible {
  outline: 2px solid #a78bfa;
  outline-offset: 4px
}
.btn-136:active {
  transform: scale(.98)
}
@keyframes drift136 {
  to {
    background-position: 100% 100%,0 100%,100% 0,0 0
  }
}
@media (prefers-reduced-motion: reduce) {
  .btn-136, .btn-136 * { animation: none; transition: none; }
}

HTML

<button class="btn-136">Dream</button>

Prompt

Ein Pillen-Button mit Aurora-Mesh-Hintergrund: drei radiale Verläufe (Pink #f0abfc, Cyan #67e8f9, Lavendel #a78bfa) über einer violetten #6d28d9 Basis, background-size 200%, jeder Blob driftet über 6 Sekunden an eine neue Position und zurück. Weißer Text 15px bold mit hellem Textschatten, 15px mal 32px Padding. Hover skaliert 1.04 und beschleunigt den Drift auf 2.5s; active skaliert 0.98. Fokus 2px Lavendel-Outline mit 4px Offset.

Aurora-Drift

Gleiches Regal