3D Working Calculator Using HTML and CSS

Hello friends, today in this tutorial we are going to talk about how to make a 3D style Calculator just using HTML and CSS.

This calculator is absolutely usable for calculating. The button in the calculator have a hover effect to make them look more 3D.

Calculator working principle

I didn't use any JavaScript code to make this calculator work. I am using the input element to enter the value and submit to the <form>, and a input that calculate all the value submitted and another text input which has been set to read only will display the result.

Source Code

I will sharing all the source code i use at here and you can copy it at the below. You can also download the zip file at the bottom of this page.

HTML Code :

<div class="wrapper">
      <form action="" name="forms">
      <input type="text" name="answer" class="output" readonly/>
    <div class="btn-container">
     <div class="btns">
       <input class="btn" type="button" value="AC" onclick="forms.answer.value = ''" class="red">
       <input class="btn" type="button" value="DEL" onclick="forms.answer.value = forms.answer.value.substr(0 , forms.answer.value.length -1)" class="red">
       <input class="btn" type="button" value="%" onclick="forms.answer.value += '%'">
       <input class="btn" type="button" value="/" onclick="forms.answer.value += '/'">
     </div>
     <div class="btns">
       <input class="btn" type="button" value="7" onclick="forms.answer.value += '7'">
       <input class="btn" type="button" value="8" onclick="forms.answer.value += '8'">
       <input class="btn" type="button" value="9" onclick="forms.answer.value += '9'">
       <input class="btn" type="button" value="*" onclick="forms.answer.value += '*'">
     </div>
     <div class="btns">
       <input class="btn" type="button" value="4" onclick="forms.answer.value += '4'">
       <input class="btn" type="button" value="5" onclick="forms.answer.value += '5'">
       <input class="btn" type="button" value="6" onclick="forms.answer.value += '6'">
       <input class="btn" type="button" value="-" onclick="forms.answer.value += '-'">
     </div>
     <div class="btns">
       <input class="btn" type="button" value="1" onclick="forms.answer.value += '1'">
       <input class="btn" type="button" value="2" onclick="forms.answer.value += '2'">
       <input class="btn" type="button" value="3" onclick="forms.answer.value += '3'">
       <input class="btn" type="button" value="+" onclick="forms.answer.value += '+'">
     </div>
     <div class="btns">
       <input class="btn" type="button" value="0"  onclick="forms.answer.value += '0'">
       <input class="btn" type="button" value="00" onclick="forms.answer.value += '00'">
       <input class="btn" type="button" value="." onclick="forms.answer.value += '.'">
       <input class="btn" type="button" value="=" onclick="forms.answer.value = eval(forms.answer.value)">
     </div>
   </div>
      </form>
  </div>

CSS Code :

*{
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
body{
   display: flex;
   justify-content: center;
   align-items: center;
   background: #08C20D;
}
.btn{
 align-items: center;
 appearance: none;
 background-color: #FCFCFD;
 border-radius: 4px;
 border-width: 0;
 box-shadow: rgba(45, 35, 66, 0.2) 0 2px 4px,rgba(45, 35, 66, 0.15) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
 box-sizing: border-box;
 color: #36395A;
 cursor: pointer;
 display: inline-flex;
 font-family: "JetBrains Mono",monospace;
 height: 48px;
 justify-content: center;
 line-height: 1;
 list-style: none;
 overflow: hidden;
 padding-left: 16px;
 padding-right: 16px;
 position: relative;
 text-align: left;
 text-decoration: none;
 transition: box-shadow .15s,transform .15s;
 user-select: none;
 -webkit-user-select: none;
 touch-action: manipulation;
 white-space: nowrap;
 will-change: box-shadow,transform;
 font-size: 18px;
}


.btn:active {
 box-shadow: #D6D6E7 0 3px 7px inset;
 transform: translateY(2px);
}

.wrapper{
   width: 85%;
   height: 380px;
   background: #A7A7A7;
   margin-top: 50px;
   border-radius: 15px;
   box-shadow: rgba(45, 35, 66, 0.2) 0 2px 4px,rgba(45, 35, 66, 0.15) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
   transition: box-shadow .15s,transform .15s;
  
   display: flex;
   justify-content: center;
   align-items: center;
}
input.output{
   width: 100%;
   height: 45px;
   margin-top: 5px;
   outline: none;
   text-align: right;
   background: #53844B;
   border-radius: 5px;
   border: none;
   padding-right: 15px;
   font-size: 18px;
   font-weight: bold;
}
.btns{
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
}
.btn-container{
   margin-top: 25px;
}
.btn{
   margin: 4px;
}

@media only screen and (min-width: 768px){
   .wrapper{
      width: 35%;
   }
}

DOWNLOAD ZIP

Here is the zip file for the source code. I have place the source code at the Google Drive and you can use the button below to download the zip file for the source code.

Download Files

Please wait..

If the download didn't start automatically, click here.

Conclusion

If you are facing any problem, you can contact us with the contact us page and we will reply you soon.

Coding World