Design for AI

Aurora outline text

Aurora outline text: a CSS button. Copy the rules, or the prompt that rebuilds it.

auroraoutlinegradient-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

A dark #0f172a button with a 2px #334155 border and 12px radius, 13px by 28px padding, where the 16px extra-bold label itself is a flowing aurora gradient (green, cyan, lavender, pink) clipped to the text with background-clip:text and animated across it every 3 seconds. Hover turns the border cyan #22d3ee with a soft cyan glow; active darkens to #020617. Focus 2px lavender outline.

Same shelf