Calculadora de cristal
Una calculadora que funciona, con teclas de cristal que se hunden al pulsarlas sobre un fondo de colores.
Ajustes
Código
<div class="uv-gcl"><output class="ds" aria-live="polite">0</output><div class="kp"><button type="button" class="fn" data-k="C">C</button><button type="button" class="fn" data-k="±">±</button><button type="button" class="fn" data-k="%">%</button><button type="button" class="op" data-k="÷">÷</button><button type="button" data-k="7">7</button><button type="button" data-k="8">8</button><button type="button" data-k="9">9</button><button type="button" class="op" data-k="×">×</button><button type="button" data-k="4">4</button><button type="button" data-k="5">5</button><button type="button" data-k="6">6</button><button type="button" class="op" data-k="−">−</button><button type="button" data-k="1">1</button><button type="button" data-k="2">2</button><button type="button" data-k="3">3</button><button type="button" class="op" data-k="+">+</button><button type="button" class="zr" data-k="0">0</button><button type="button" data-k=",">,</button><button type="button" class="eq" data-k="=">=</button></div></div>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Liquid Glass
Ver todos: Liquid GlassDónde usarlo
Una calculadora es el escaparate perfecto para teclas de cristal porque es todo botones. Esta funciona de verdad: números, coma decimal, cambio de signo, porcentaje y las cuatro operaciones, con el operador activo resaltado en blanco hasta escribir el siguiente número. Cada tecla es una píldora esmerilada que se encoge al pulsarla sobre grandes formas de color que dejan ver la refracción.
Los resultados usan los separadores del idioma de la página y los números largos se recortan. Úsala en widgets, calculadoras de propinas o hipotecas o como demo del material, y ajusta el cristal con los controles.