Calculator Key
Beige concave keycap with olive-green accent label; click flips the press shadow flush.
Calculator Key the 39th of 43 designs in the 43 CSS Button Designs collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<button class="btn-calc">
<span class="btn-calc-cap">
<span class="btn-calc-glyph">=</span>
<span class="btn-calc-label">EQUAL</span>
</span>
</button> .btn-calc {
display: inline-block;
padding: 0;
border: none;
background: transparent;
cursor: pointer;
}
.btn-calc-cap {
display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
gap: 2px;
width: 84px; height: 64px;
background: linear-gradient(180deg, #ebe4d3 0%, #d8d2c0 60%, #c0b9a3 100%);
border-radius: 6px;
box-shadow:
inset 0 -6px 8px rgba(0,0,0,0.12),
inset 0 2px 3px rgba(255,255,255,0.7),
0 4px 0 #4d5435,
0 6px 12px rgba(0,0,0,0.2);
transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.btn-calc-glyph {
font-family: ui-monospace, monospace;
font-size: 22px; font-weight: 900;
color: #4d5435;
}
.btn-calc-label {
font-family: ui-monospace, monospace;
font-size: 8px; font-weight: 700;
letter-spacing: 0.18em;
color: #4d5435;
opacity: 0.8;
}
.btn-calc:active .btn-calc-cap {
transform: translateY(3px);
box-shadow:
inset 0 -2px 4px rgba(0,0,0,0.18),
inset 0 2px 3px rgba(255,255,255,0.5),
0 1px 0 #4d5435,
0 2px 4px rgba(0,0,0,0.15);
}