Membuat Keypad Sederhana dengan CSS

بِسْمِ اللّهِ الرَّحْمَنِ الرَّحِيْمِ

Asalamualaikum Warahmatullahi Wabarakatu.

Kali ini saya akan memberikan sedikit penghetahuan saya tentang HTML dan css
dan pada kali saya akan membuat keypad mengunakan HTML  😀

ya,gambar nya persis seperti diatas, pertama-tama kita buat file dengan format html dengan nama : keypad.html

<!-- meengambil css --> 
 
  
 <!-- meengambil css --> 
 
 
 
 <!-- Membuat Form -->


<html>
 <head>          
 <link href="tombol.css" rel="stylesheet">
 
    </head>
    <body>
	<form name="test" action="#" method="post">
  <div id="calculator">
   <!-- Screen and clear key -->
   <div class="top">
   <input type="reset" class="clear" value="C"></input>
    <input type ="text" name="Input" class="screen" Size="20" >
   </div>
    
   <div class="keys">
    <!-- operators and other keys -->
    <input type="button" value="1" OnClick="test.Input.value += '1'" ></input>
       <input type="button" value="2" OnClick="test.Input.value -= '1'"></input>
     <input type="button" value="3" OnClick="test.Input.value += '3'"></input>
     <input type="button" value="a" class="operator" OnClick="test.Input.value += 'a'"></input>
   <input type="button" value="4" OnClick="test.Input.value += '4'"></input>
 <input type="button" value="5" OnClick="test.Input.value += '5'"></input>
<input type="button" value="6" OnClick="test.Input.value += '6'"></input>
<input type="button" value="b" class="operator" OnClick="test.Input.value += 'b'"></input>
   <input type="button" value="7" OnClick="test.Input.value += '7'"></input>
 <input type="button" value="8" OnClick="test.Input.value += '8'"></input>
   <input type="button" value="9" OnClick="test.Input.value += '9'"></input>
   <input type="button" value="c" class="operator" OnClick="test.Input.value += 'c'"></input>
     <input type="button" value="*" OnClick="test.Input.value += '*'"></input>
     <input type="button" value="0" OnClick="test.Input.value += '0'"></input>
    <input type="button" value="#" OnClick="test.Input.value += '#'"></input>
     <input type="button" value="d" class="operator" OnClick="test.Input.value += 'd'"></input>
	 <input type="submit" value="Enter" class="enter"></input>
   </div>
  </div>
  <script src="prefixfree-1.0.7.js" type="text/javascript" type="text/javascript"></script>
 <script src="jquery.min.js" type="text/javascript" type="text/javascript"></script>
 <script src="tombol.js" type="text/javascript" type="text/javascript"></script>
    </body>
	</form>
</html>

selanjutnya kita buat tombol.css

 
/* mengatur lebar papan keypad */
* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
  

 font: bold 14px Arial, sans-serif;
}
 
 
/* mengatur background  */
html {
 height: 100%;
 background: white;
 background: radial-gradient(circle, #fff 20%, #ccc);
 background-size: cover;
}
 
/* mengatur susunan tombol keypad dan papan keypad*/
#calculator {
 width: 325px;
 height: auto;
  
 margin: 100px auto;
 padding: 20px 20px 9px;
  
 background: #9dd2ea;
 background: linear-gradient(#9dd2ea, #8bceec);
 border-radius: 3px;
 box-shadow: 0px 4px #009de4, 0px 10px 15px rgba(0, 0, 0, 0.2);
}

.top input.clear {
 float: left;
}
 
/* Mengatur layar Keypad */
.top .screen {
 height: 40px;
 width: 212px;
  
 float: right;
  
 padding: 0 10px;
  
 background: rgba(0, 0, 0, 0.2);
 border-radius: 3px;
 box-shadow: inset 0px 4px rgba(0, 0, 0, 0.2);
 
 font-size: 17px;
 line-height: 40px;
 color: white;
 text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
 text-align: right;
 letter-spacing: 1px;
}
 
/* Mengatur ukuran keypad */
.keys, .top {overflow: hidden;}
 
/* mengatur ukuran tombol keypad */
.keys input, .top input.clear {
 float: left;
 position: relative;
 top: 0;
  
 cursor: pointer;
  
 width: 66px;
 height: 36px;
  
 background: purple;
 border-radius: 3px;
 box-shadow: 0px 4px rgba(0, 0, 0, 0.2);
  
 margin: 0 7px 11px 0;
  
 color: #888;
 line-height: 36px;
 text-align: center;
  

 user-select: none;
  
 
 transition: all 0.2s ease;
}
 
/* mengatur tombol keypad warna pink*/
.keys input.operator {
 background: #ff9fa8;
 margin-right: 0;
}
 
.keys input.eval {
 background: #f1ff92;
 box-shadow: 0px 4px #9da853;
 color: #888e5f;
}
 
.top input.clear {
 background: #ff9fa8;
 box-shadow: 0px 4px #ff7c87;
 color: white;
}
 
/* hover effect pada tombol keypad*/
.keys input:hover {
 background: #9c89f6;
 box-shadow: 0px 4px #6b54d3;
 color: white;
}
 
.keys input.eval:hover {
 background: #abb850;
 box-shadow: 0px 4px #717a33;
 color: #ffffff;
}
 
.top input.clear:hover {
 background: #f68991;
 box-shadow: 0px 4px #d3545d;
 color: white;
}
 

.keys input:active {
 box-shadow: 0px 0px #6b54d3;
 top: 4px;
}
 
.keys input.eval:active {
 box-shadow: 0px 0px #717a33;
 top: 4px;
}
 
.top input.clear:active {
 top: 4px;
 box-shadow: 0px 0px #d3545d;
}
.keys .enter 
{
	background: radial-gradient(circle, #fff 20%, #ccc);
}

Jika Ingin mengunduh file diatas silahkan download.

demikian tutorial dari saya, semoga bermanfaat.

Wasalamualaikum Warahmatullahi Wabarakatu

Thanks! You've already liked this