Aurora Outline-Text

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

aurora outlinegradient-textroundedanimated

CSS

.btn-140 {
  font: 800 16px/1 system-ui,sans-serif;
  background: #0f172a;
  border: 2px solid #334155;
  border-radius: 12px;
  padding: 13px 28px;
  cursor: pointer;
  transition: border-color .3s,box-shadow .3s
}
.btn-140 span {
  background: linear-gradient(90deg,#34d399,#22d3ee,#a78bfa,#f472b6,#34d399);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: flow140 3s linear infinite
}
.btn-140:hover {
  border-color: #22d3ee;
  box-shadow: 0 0 18px #22d3ee44
}
.btn-140:focus-visible {
  outline: 2px solid #a78bfa;
  outline-offset: 3px
}
.btn-140:active {
  background: #020617
}
@keyframes flow140 {
  to {
    background-position: 200% 0
  }
}
@media (prefers-reduced-motion: reduce) {
  .btn-140, .btn-140 * { animation: none; transition: none; }
}

HTML

<button class="btn-140"><span>Aurora</span></button>

Prompt

Ein dunkler #0f172a Button mit 2px Rahmen #334155 und 12px Radius, 13px mal 28px Padding, bei dem das 16px extra-bold Label selbst ein fließender Aurora-Verlauf ist (Grün, Cyan, Lavendel, Pink), per background-clip:text auf den Text beschnitten und alle 3 Sekunden darüber animiert. Hover färbt den Rahmen Cyan #22d3ee mit weichem Cyan-Leuchten; active dunkelt auf #020617. Fokus 2px Lavendel-Outline.

Aurora Outline-Text

Gleiches Regal