calculator from astound commerce

md.shakil hossain

1359

 <div id="background"><!-- Main background -->
             
        <div id="result"></div>
             
         <div id="main">
             <div id="first-rows">
              <button class="del-bg" id="delete">C</button>
              <button class="del-bg" id="deleteCA">CA</button>
                 <button value="%" class="btn-style operator opera-bg fall-back">%</button>
                 <button value="+" class="btn-style opera-bg value align operator">+</button>
                 </div>
                 
               <div class="rows">
             <button value="7" class="btn-style num-bg num first-child">7</button>
                 <button value="8" class="btn-style num-bg num">8</button>
                 <button value="9" class="btn-style num-bg num">9</button>
                 <button value="-" class="btn-style opera-bg operator">-</button>
                 </div>
                 
                 <div class="rows">
                 <button value="4" class="btn-style num-bg num first-child">4</button>
                 <button value="5" class="btn-style num-bg num">5</button>
                 <button value="6" class="btn-style num-bg num">6</button>
                 <button value="*" class="btn-style opera-bg operator">x</button>
                 </div>
                 
                 <div class="rows">
                 <button value="1" class="btn-style num-bg num first-child">1</button>
                 <button value="2" class="btn-style num-bg num">2</button>
                 <button value="3" class="btn-style num-bg num">3</button>
                 <button value="/" class="btn-style opera-bg operator">/</button>
                 </div>
                 
                 <div class="rows">
                 <button value="0" class="num-bg zero" id="delete">0</button>
                 <button value="." class="btn-style num-bg period fall-back">.</button>
                 <button value="=" id="eqn-bg" class="eqn align">=</button>
                 </div>
                
             </div>
         
         </div>

Try it Yourself >>

 body {
  background:#777;
}

#background {
    width:300px;
    height:400px;
    background:gray;
    margin:50px auto;
    -webkit-animation:bgChange 2s 2s alternate infinite;
    transition: all 2s ease;
}

button {
    border:0;
    color:black;
}

#result {
    display:block;
    font-family: sans-serif;
    width:230px;
    height:40px;
    margin:10px auto;
    text-align: right;
    border:0;
    background:#3b3535;
    color:#fff;
    padding-top:20px;
    font-size:20px;
    margin-left: 25px;
    position: relative;
    top:10px;
}


#first-rows {
    margin-bottom: 20px;
    position: relative;
    top:10px;
}

.rows {
    width:300px;
    margin-top:10px;
}

#delete {
    width:55px;
    height:50px;
    margin-left:25px;
    border-radius:4px;
}

#deleteCA {
    width:49px;
    height:50px;
    margin-left:4px;
    border-radius:4px;
}

/* Aligning the division and dot button properly */
.fall-back {
    margin-left:3px !important;
}

/* Aligning the addition and equals to button properly */
.align {
    margin-left: 6px !important;
}

/* Button styling */
.btn-style {
    width:50px;
    height:50px;
    margin-left:5px;
    border-radius:4px;
}

.eqn {
    width:50px;
    height:50px;
    margin-left:5px;
    border-radius:4px;
}

.first-child {
 margin-left:25px;
}
/* Adding background color to the number values */
 .num-bg {
    background:#000;
    color:#fff;
    font-size:26px;
    cursor:pointer;
    outline:none;
    border-bottom:3px solid #333;
}

Try it Yourself >>