Design for AITexto aurora en contorno
Texto aurora en contorno: botón en CSS. Copia las reglas, o el prompt que reproduce el resultado.
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
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.