This tutorial explains how to build a sleek calculator UI using HTML5 and CSS.
HTML Structure (What we are building)
<div class="container">
<div class="calculator">
<div class="display">
<div class="track">
12 × 4 =
</div>
<div class="result">
48
</div>
</div>
<div class="buttons-container">
<ol>
<li class="orange">C</li>
<li class="orange">√</li>
<li class="orange">%</li>
<li class="orange">+/-</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li class="orange">÷</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li class="orange">×</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li class="orange">-</li>
<li>0</li>
<li>·</li>
<li class="orange">+</li>
<li class="orange">=</li>
</ol>
</div>
</div>
</div>
We split the UI into 3 main parts:
-
.calculator→ the main calculator body -
.display→ shows calculation and result -
.buttons-container→ holds all buttons in a grid
I chose to use an ordered list for the calculator buttons part.
Base Styling
body {
margin: 0;
padding: 0;
background-color: #80d0c7;
font-family: Montserrat, sans-serif;
}
body * {
box-sizing: border-box;
}
Centering the Calculator
.container {
min-height: 100vh;
width: 100%;
padding: 5px;
display: flex;
align-items: center;
justify-content: center;
}
This is classic Flexbox centering:
-
display: flexenables flex layout -
align-items: centercenters vertically -
justify-content: centercenters horizontally -
min-height: 100vhmakes it fill the full screen height
This way, the calculator always stays centered.
Styling the Calculator's Body
.calculator {
width: 100%;
max-width: 360px;
min-width: 300px;
margin: 10px auto;
padding: 36px;
background: #515151;
border-radius: 18px;
box-shadow:
0 10px 30px rgba(0, 0, 0, 0.25),
inset -4px -4px 10px rgba(0, 0, 0, 0.25);
}
The last line gives the calculator the appearance of depth.
Display Area
.display {
position: relative;
display: flex;
flex-direction: column;
padding: 12px 20px;
margin-bottom: 34px;
background: #c0d3c0;
border-radius: 16px;
border: 1px solid rgba(0,0,0,0.6);
box-shadow: inset 0 0 4px 2px rgba(0,0,0,0.25);
overflow: hidden;
}
Explanation
-
backgroundmimics LCD screen -
inset shadowgives screen depth
Display Text Alignment
.track,
.result {
display: flex;
justify-content: flex-end;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Explanation
This ensures calculator-style alignment:
-
justify-content: flex-end→ numbers align right -
white-space: nowrap→ prevents line breaks -
text-overflow: ellipsis→ adds “…” if too long
Calculation History
.track {
position: absolute;
top: 8px;
left: 20px;
right: 20px;
font-size: 12px;
font-weight: 600;
opacity: 0.6;
}
Explanation
-
position: absolutefloats it inside display -
opacity: 0.6makes it less important than the result
Result Styling
.result {
margin-top: 16px;
font-size: clamp(2rem, 8vw, 3rem);
font-weight: 700;
}
Explanation
-
clamp()makes font responsive: -
font-weight: 700makes the result visually dominant
Button Grid Layout (CSS Grid)
.buttons-container ol {
list-style-type: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
How it works:
-
display: gridenables grid system -
repeat(4, 1fr)creates 4 equal columns -
gapcontrols spacing between buttons
Button Styling
.buttons-container li {
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 1;
font-size: 36px;
font-weight: 600;
background: #e7e7e7;
color: #242424;
border-radius: 10px;
border: 1px solid rgba(0,0,0,0.7);
box-shadow: inset -3px -3px 3px rgba(0,0,0,0.15);
cursor: pointer;
user-select: none;
transition: transform 0.08s ease, filter 0.15s ease;
}
How it works:
We make sure the buttons are always square with aspect-ratio: 1. We use box-shadow: inset -3px -3px 3px rgba(0,0,0,0.15) for the illusion of depth.
Click Effect
We simulate real button press with:
.buttons-container li:active {
transform: translateY(2px);
}
Operator Buttons (Orange)
We use a nice orange color for the operation buttons:
.buttons-container .orange {
background: #d88d43;
color: #fff;
border: 1px solid rgba(0,0,0,0.5);
}
Here is a Codepen with the final result I got! 😊
