Design for AICristal con luz interior
Cristal con luz interior: botón en CSS. Copia las reglas, o el prompt que reproduce el resultado.
CSS
.btn-037 {
font: 600 14px/1 system-ui,sans-serif;
color: #fff;
background: linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.04));
border: 1px solid rgba(255,255,255,.18);
border-top-color: rgba(255,255,255,.4);
border-radius: 10px;
padding: 12px 24px;
cursor: pointer;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
box-shadow: 0 10px 30px rgba(0,0,0,.4);
transition: background .2s,transform .2s
}
.btn-037:hover {
background: linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.08));
transform: translateY(-1px)
}
.btn-037:focus-visible {
outline: 2px solid rgba(255,255,255,.7);
outline-offset: 3px
}
.btn-037:active {
transform: none;
background: rgba(255,255,255,.06)
}
HTML
<div style="background:#0f0f14;padding:28px"><button class="btn-037">Join beta</button></div>Prompt
Un botón de cristal oscuro: relleno vertical de blanco al 14% a 4%, borde de 1px blanco al 18% con el canto superior más brillante al 40%, desenfoque de fondo de 10px, sombra negra profunda 0 10px 30px, radio de 10px, padding de 12px por 24px, texto blanco de 14px semibold. Al pasar el cursor el relleno se aclara (22% a 8%) y se eleva 1px; en active se aplana a blanco al 6%. Outline de foco de 2px blanco al 70%.