-
Embossed UI Calculator
HTML
CSS
JavaScript
<div class="calculator"> <input type="text" class="display" id="display" readonly> <div class="buttons"> <button class="clear" onclick="clearDisplay()">C</button> <button onclick="deleteLast()">⌫</button> <button class="operator" onclick="append('%')">%</button> <button class="operator" onclick="append('/')">÷</button> <button onclick="append('7')">7</button> <button onclick="append('8')">8</button> <button onclick="append('9')">9</button> <button class="operator" onclick="append('*')">×</button> <button onclick="append('4')">4</button> <button onclick="append('5')">5</button> <button onclick="append('6')">6</button> <button class="operator" onclick="append('-')">−</button> <button onclick="append('1')">1</button> <button onclick="append('2')">2</button> <button onclick="append('3')">3</button> <button class="operator" onclick="append('+')">+</button> <button onclick="append('0')">0</button> <button onclick="append('.')">.</button> <button class="equal" onclick="calculate()">=</button> </div> </div>
*{ margin:0; padding:0; box-sizing:border-box; font-family:"Poppins",sans-serif; } body{ height:100vh; display:flex; justify-content:center; align-items:center; background:#dfe7f1; } .calculator{ width:340px; padding:25px; border-radius:35px; background:#dfe7f1; box-shadow: 15px 15px 30px rgba(0,0,0,0.12), -15px -15px 30px rgba(255,255,255,0.9); } .display{ width:100%; height:90px; border:none; outline:none; border-radius:25px; padding:20px; margin-bottom:25px; font-size:38px; text-align:right; color:#334155; background:#dfe7f1; box-shadow: inset 8px 8px 15px rgba(0,0,0,0.12), inset -8px -8px 15px rgba(255,255,255,0.9); } .buttons{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; } button{ height:50px; border:none; border-radius:20px; cursor:pointer; font-size:24px; font-weight:600; color:#334155; background:#dfe7f1; box-shadow: 8px 8px 15px rgba(0,0,0,0.12), -8px -8px 15px rgba(255,255,255,0.9); transition:0.15s; } button:active{ box-shadow: inset 6px 6px 10px rgba(0,0,0,0.12), inset -6px -6px 10px rgba(255,255,255,0.9); transform:scale(0.97); } .operator{ color:#2563eb; } .equal{ background:#2563eb; color:white; grid-column:span 2; box-shadow: 8px 8px 15px rgba(37,99,235,0.4), -8px -8px 15px rgba(255,255,255,0.8); } .equal:active{ box-shadow: inset 6px 6px 10px rgba(0,0,0,0.2), inset -6px -6px 10px rgba(255,255,255,0.2); } .clear{ color:#ef4444; }
const display = document.getElementById("display"); function append(value){ display.value += value; } function clearDisplay(){ display.value = ""; } function deleteLast(){ display.value = display.value.slice(0,-1); } function calculate(){ try{ display.value = eval(display.value); } catch{ display.value = "Error"; } }
Live Preview
- Embossed UI Calculator