Design for AITexto aurora em contorno
Texto aurora em contorno: um botão em CSS. Copie as regras, ou o prompt que o reconstrói.
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
Um botão escuro #0f172a com borda de 2px #334155 e raio de 12px, padding de 13px por 28px, onde o próprio rótulo de 16px extra-bold é um gradiente aurora fluido (verde, ciano, lavanda, rosa) recortado no texto com background-clip:text e animado ao longo dele a cada 3 segundos. No hover a borda vira ciano #22d3ee com um brilho ciano suave; no active escurece para #020617. Foco com outline lavanda de 2px.