CodePen Embed - Calculator Design

<div class="cont_principal">
<div class="cont_calculator">
  <div class="cont_title_cal"></div>
  <div class="cont_result_cal">
  <input type="text" value="42" class="input_result" />
  </div>
  <div class="cont_btns_cal">
  <div class="cont_fila_list_num">
    <ul class="cont_list_btns list_btns_1">
      <li><a href="#">M+</a></li>
      <li><a href="#">M-</a></li>
      <li><a href="#">MR</a></li>
      <li><a href="#">MC</a></li>
      <li><a href="#">+/-</a></li>      
    </ul>
    </div>
  <div class="cont_fila_list_num">
    <ul class="cont_list_btns btns_oscuros">
      <li><a href="#">&Delta;%</a></li>
      <li><a href="#">7</a></li>
      <li><a href="#">8</a></li>
      <li><a href="#">9</a></li>
      <li><a href="#">&divide;  </a></li>      
    </ul>
    </div>    
<div class="cont_fila_list_num">
    <ul class="cont_list_btns btns_oscuros">
      <li><a href="#">&radic; </a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
      <li><a href="#">6</a></li>
      <li><a href="#">x</a></li>      
    </ul>
    </div>    
<div class="cont_fila_list_num">
    <ul class="cont_list_btns btns_oscuros">
      <li><a href="#">%</a></li>
      <li><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li><a href="#">-</a></li>      
    </ul>
    </div>    
<div class="cont_fila_list_num">
    <ul class="cont_list_btns btns_oscuros">
      <li><a href="#">CE</a></li>
      <li><a href="#">0</a></li>
      <li><a href="#">.</a></li>
      <li><a href="#">=</a></li>
      <li><a href="#">+</a></li>      
    </ul>
    </div>    

    <!-- Fin Contenedor botonoes -->
  </div>
  </div>
</div>

* {
  margin: 0px auto;
  padding: 0px;
  text-align: center;
}
.cont_principal {
  position: absolute;
  width: 100%;
  height: 100%;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#efebef+0,d2d7da+53,d8dbe0+100 */
background: rgb(239,235,239); /* Old browsers */
background: -moz-linear-gradient(-45deg,  rgba(239,235,239,1) 0%, rgba(210,215,218,1) 53%, rgba(216,219,224,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  rgba(239,235,239,1) 0%,rgba(210,215,218,1) 53%,rgba(216,219,224,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg,  rgba(239,235,239,1) 0%,rgba(210,215,218,1) 53%,rgba(216,219,224,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efebef', endColorstr='#d8dbe0',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}
.cont_calculator {
position: absolute;  
 width: 300px;
  height: 400px;
  background-color: #292740;
top: 50%; 
  left: 50%;
margin-top: -200px;
  margin-left: -150px;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#292740+0,050320+100 */
background: rgb(41,39,64); /* Old browsers */
background: -moz-linear-gradient(-45deg,  rgba(41,39,64,1) 0%, rgba(5,3,32,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  rgba(41,39,64,1) 0%,rgba(5,3,32,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg,  rgba(41,39,64,1) 0%,rgba(5,3,32,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#292740', endColorstr='#050320',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
transition: all 0.5s;
}

.cont_title_cal {
  position: relative;
  float: left;
  width: 100%;
  height: 35px;
}

.cont_result_cal {
  position: relative;
  float: left;
  width: 100%;
  height: 150px;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#32304c+0,110c32+100 */
background: rgb(50,48,76); /* Old browsers */
background: -moz-linear-gradient(-45deg,  rgba(50,48,76,1) 0%, rgba(17,12,50,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  rgba(50,48,76,1) 0%,rgba(17,12,50,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg,  rgba(50,48,76,1) 0%,rgba(17,12,50,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#32304c', endColorstr='#110c32',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.cont_fila_list_num {
  position: relative;
  width: 100%;
  float: left;
}

.cont_list_btns {
  position: relative;
  width: 100%;
  float: left;
}

.cont_list_btns > li {
  position: relative;
  width: 20%;
  float: left;
list-style: none;
margin-top: 5px;
}

.cont_list_btns > li > a {
  text-decoration:none;
  color:#fff;
  font-family: Arial;
  display: block;
  border-radius:50%;
font-size: 14px;
padding: 0px 5px;
  padding-top: 10px; 
  width: 24px;
  height: 24px;
transition: all 0.5s;
transform: translate(0px,-5px);
opacity: 0;
}
.cont_list_btns > li > a:hover {
  background-color: #D3B04D;
color: #221C0C;
}
  .list_btns_1 > li > a {
  color: #6F6E7F;
}

.btns_oscuros > li:first-child > a,.btns_oscuros > li:last-child > a {
  color: #393A3E;
}

.input_result {  
  background-color: transparent;
  width: 90%;
  height: 70px;
  font-size: 40px;
color: #fff;
  border: none;
margin-top: 70px;
text-align:right;
padding-right: 2%;
outline: none;
}

.cont_calculator_active2  > .cont_btns_cal > .cont_fila_list_num > .cont_list_btns > li:nth-child(1) > a   {
transform: translate(0px,0px);
opacity: 1;  
transition-delay: 0.5s;
}

.cont_calculator_active2  > .cont_btns_cal > .cont_fila_list_num > .cont_list_btns > li:nth-child(2) > a  {
transform: translate(0px,0px);
opacity: 1;  
transition-delay: 0.7s;
  
}

.cont_calculator_active2  > .cont_btns_cal > .cont_fila_list_num > .cont_list_btns > li:nth-child(3) > a  {
transform: translate(0px,0px);
opacity: 1;  
transition-delay: 1s;
  
}

.cont_calculator_active2  > .cont_btns_cal > .cont_fila_list_num > .cont_list_btns > li:nth-child(4) > a  {
transform: translate(0px,0px);
opacity: 1;  
transition-delay: 1.3s;
  
}

.cont_calculator_active2  > .cont_btns_cal > .cont_fila_list_num > .cont_list_btns > li:nth-child(5) > a {
  transform: translate(0px,0px);
opacity: 1;  
transition-delay: 1.5s;
}

.cont_calculator_active1 {
  box-shadow: 20px 20px  50px  -10px rgba(0,0,0,0.6);
transition-delay: 0.5s;
}

.cont_calculator_active3  > .cont_btns_cal > .cont_fila_list_num > .cont_list_btns > li >a {
  transition:all 0.5s !!important;
  transition-delay: 0s !important ;
}

window.onload = function(){
  document.querySelector('.cont_calculator').className = "cont_calculator cont_calculator_active1";

  setTimeout(function(){
document.querySelector('.cont_calculator').className = "cont_calculator cont_calculator_active1 cont_calculator_active2";    
  },500);

  setTimeout( function(){
document.querySelector('.cont_calculator').className = "cont_calculator cont_calculator_active1 cont_calculator_active2 cont_calculator_active3";  },1500);


}

This Pen is owned by Dany Santos on CodePen.

See more by @THEORLAN2 on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.