Design for AIFantasma con texto degradado
Fantasma con texto degradado: botón en CSS. Copia las reglas, o el prompt que reproduce el resultado.
CSS
.btn-027 {
font: 700 15px/1 system-ui,sans-serif;
background: linear-gradient(90deg,#d946ef,#f97316);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
border: 0;
border-radius: 8px;
padding: 12px 20px;
cursor: pointer;
transition: filter .15s,background-color .15s
}
.btn-027:hover {
filter: brightness(1.15)
}
.btn-027:focus-visible {
outline: 2px solid #d946ef;
outline-offset: 2px
}
.btn-027:active {
filter: brightness(.9)
}
HTML
<button class="btn-027">Pro features</button>Prompt
Un botón fantasma sin borde cuyo texto es en sí un degradado (90deg de fucsia #d946ef a naranja #f97316) mediante background-clip text, 15px en negrita, padding de 12px por 20px, fondo transparente, radio de 8px. Al pasar el cursor el degradado se aclara un 15%, en active se atenúa al 90%. Outline de foco de 2px fucsia.