Making a Calculator only with CSS

Bootstrap Code Snippet for Responsive Calculator Design

This calculator is just a design, if you want working calculator, you have to add functionality with java script, php etc. In this code snippet, there is nothing more than simple css and bootstrap grid.

<style type="text/css">
.cal-wrapper{
max-width: 900px;
margin: 0 auto;
padding: 60px 0;
background: #f16a59;
position: relative;
overflow: hidden;
}
.cal-wrapper:after{
content: '';
width: 500px;
height: 900px;
position: absolute;
background: #9C27B0;
z-index: 9;
bottom: -50%;
right: -100px;
transform:rotate(45deg);
}
.cal-wrapper .cal{
max-width: 350px;
overflow: hidden;
position: relative;
z-index: 10;
padding: 30px 0;
box-shadow:inset 1px 1px 1px 0 rgba(0, 0, 0, 0.2);
margin: 0 auto;
background-image: -moz-linear-gradient( -30deg, rgb(239,80,80) 0%, #9C27B0 100%);
background-image: -webkit-linear-gradient( -30deg, rgb(239,80,80) 0%, #9C27B0 100%);
background-image: -ms-linear-gradient( -30deg, rgb(239,80,80) 0%, #9C27B0 100%);
}
.cal-wrapper .cal .cal-process{
padding: 5px 15px;
color: #fff;
text-align: right;
font-size: 30px;
}
.cal-wrapper .cal .cal-answer{
font-size: 40px;
color: #fff;
text-align: right;
padding: 5px 15px;
}
.cal-wrapper .cal .numbers .single{
display: block;
text-align: center;
padding: 10px;
font-size: 24px;
color: #fff;
}
.cal-wrapper .cal .numbers .btn{
background: transparent;
outline: 0;
border-radius: 0;
}
.cal-wrapper .cal .numbers .btn span{
width: 50px;
height: 50px;
line-height: 50px;
display: block;
margin: 0 auto;
border-radius: 50%;
transition:all 0.4s ease-in-out;
}
.cal-wrapper .cal .numbers .btn:hover span{
background: rgba(255,255,255,0.2);
}
</style>
<div class="cal-wrapper">
<div class="cal">
<div class="cal-process">
10x100</div>
<div class="cal-answer">
1000</div>
<div class="pad">
<div class="row numbers">
<button class="col-xs-3 btn single">C</button>
<button class="col-xs-3 btn single">MR</button>
<button class="col-xs-3 btn single">%</button>
<button class="col-xs-3 btn single">$</button>
<button class="col-xs-3 btn single">7</button>
<button class="col-xs-3 btn single">8</button>
<button class="col-xs-3 btn single">9</button>
<button class="col-xs-3 btn single">/</button>
<button class="col-xs-3 btn single">4</button>
<button class="col-xs-3 btn single">5</button>
<button class="col-xs-3 btn single">6</button>
<button class="col-xs-3 btn single">X</button>
<button class="col-xs-3 btn single">1</button>
<button class="col-xs-3 btn single">2</button>
<button class="col-xs-3 btn single">3</button>
<button class="col-xs-3 btn single">-</button>
<button class="col-xs-3 btn single">.</button>
<button class="col-xs-3 btn single">0</button>
<button class="col-xs-3 btn single">=</button>
<button class="col-xs-3 btn single">+</button></div>
</div>
</div>
</div>

Live Demo...

10x100

1000