Creating a Simple Calculator Design Using HTML and CSS

This tutorial describes how to design a calculator using HTML and CSS. The primary purpose of this tutorial is to demonstrate to beginners how to build a small tool using simple HTML and CSS.

It is easy to design, build, and style using a few lines of HTML and CSS code. Comments are placed in the mandatory part of the code to explain more.

Simple Calculator Design Demo

HTML Code:

The HTML code that forms the structure of the calculator is shown below:

<!-- Calculator Body -->
<div class="calc-body">

<!-- Calculator Display Screen -->
<div class="calc-screen">
    <div id="calc-operation">1234 + 567 + </div>
    <div id="calc-typed">890</div>
</div>

<!-- Calculator Buttons -->
<div class="calc-button-row">
    <button class="ac">AC</button>
    <button class="opt">&#43;&#47;&#8722;</button>
    <button class="opt">&#37;</button>
    <button class="opt">&#247;</button>
    <button>7</button>
    <button>8</button>
    <button>9</button>
    <button class="opt">&#215;</button>
    <button>4</button>
    <button>5</button>
    <button>6</button>
    <button class="opt">&#8722;</button>
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button class="opt">&#43;</button>
    <button>0</button>
    <button>.</button>
    <button>&#9003;</button>
    <button class="opt">&#61;</button>
</div>
</div>

It is good practice to use HTML entities to display symbols.

CSS Code:

The CSS code that styles the structure of the calculator is shown below:

/*Calculator Body*/
.calc-body {
    width: 275px;
    margin: auto;
    min-height: 400px;
    box-shadow: 0 8px 50px -7px black;
    background: #3A4655;
}
/*Calculator Display Screen*/
.calc-screen {
    padding: 1rem;
}
#calc-operation {
    font-size: 1.3rem;
    text-align: right;
    color: #727B86;
    padding-bottom: .5rem;
}
#calc-typed {
    font-size: 2rem;
    text-align: right;
    color: #fff;
}
/*Calculator Buttons*/
.calc-button-row{
    display: table;
}
.calc-button-row button {
    display: table-cell;
    width: 25%;
    background: #425062;
    color: #fff;
    height: 65px;
    font-size: 1.3rem;
    border: none;
    border-color:#3C4857;
    border-width: 1px 1px 0px 0;
    border-style: solid;
}
.calc-button-row button.ac {
    color: #ff7665;
}
.calc-button-row button.opt {
    color: #ffbc56;
}
/*The border has been managed in every fourth button so that the design will not distract.*/
.calc-button-row button:nth-child(4n){
    border-right: none;
}
.calc-button-row button:active {
    position: relative;
    top: 1px;
}
.calc-button-row button:hover {
    background: #3e4b5c;
}