Glass calculator
A working calculator with glass keys that sink when pressed over a colorful background.
Settings
Code
<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 for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Liquid Glass
See all Liquid GlassWhere to use it
A calculator is a perfect showcase for glass keys because it is all buttons. This one really works: digits, decimal comma, change of sign, percentage and the four operations, with the active operator highlighted in white until the next number is typed. Each key is a frosted pill that shrinks slightly when pressed, over big colorful shapes that show the refraction.
Results follow the page language for separators and long numbers are trimmed. Use it in widgets, tip calculators, mortgage tools or as a playful demo of the material, and tune the glass with the blur and tint sliders.