# Texto aurora en contorno (B 140)

Categoría: Botones  
Etiquetas: aurora, outline, gradient-text, rounded, animated  
Página: https://designforai.dev/es/snippet/btn-140

## Prompt

Un botón oscuro #0f172a con borde de 2px #334155 y radio de 12px, padding de 13px por 28px, donde la propia etiqueta de 16px extra bold es un degradado aurora fluido (verde, cian, lavanda, rosa) recortado al texto con background-clip:text y animado a través de él cada 3 segundos. Al pasar el cursor el borde pasa a cian #22d3ee con un resplandor cian suave; en active se oscurece a #020617. Foco con outline lavanda de 2px.

## HTML

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

## CSS

```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; }
}
```