Desain Kalkulator dengan HTML & CSS

Berbicara tentang desain website memang tidak ada henti hentinya, selalu ada saja desain desain website yang baru atau ter update, seperti misalkan untuk perhitungan atau kalkulator dalam sebuah aplikasi website.

Nah kali ini saya akan membagikan bagaimana cara men Desain Kalkulator dengan HTML & CSS, mari kita praktekan langsung…

pertama-tama kalian buka text editor kalian dan ketikan kode HTML berikut dan beri nama dengan nama index.html

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Calculator Design </title>
	<link rel="stylesheet" href="style.css">
	<link href="https://fonts.googleapis.com/css?family=Encode+Sans+Condensed" rel="stylesheet"> 
</head>
<body>
	<div>
		<h1> Calculator Design </h1>
	</div>
	<form>
		<table border="0">
			<tr>
				<td colspan="4">
					<h2> Calculator </h2>
				</td>
			</tr>
			<tr>
				<td colspan="4"><input id="nilai" type="text" placeholder="0" ></td>
			</tr>
			<tr>
				<td> <button> 7 </button> </td>
				<td> <button> 8 </button> </td>	
				<td> <button> 9 </button> </td>	
				<td> <button class="orange">/</button> </td>
			</tr>
			<tr>
				<td> <button> 4 </button> </td>
				<td> <button> 5 </button> </td>	
				<td> <button> 6 </button> </td>
				<td> <button class="orange">x</button></td>	
			</tr>
			<tr>
				<td> <button> 1 </button> </td>
				<td> <button> 2 </button> </td>	
				<td> <button> 3 </button> </td>
				<td> <button class="orange">+</button> </td>	
			</tr>
			<tr>
				<td> <button> 0 </button> </td>
				<td> <button> .</button> </td>	
				<td> <button class="orange"> = </button> </td>
				<td> <button class="orange"> - </button> </td>	
			</tr>
		</table>
	</form>
</body>
</html>

setelah itu ketikan kode css berikut dan beri nama dengan nama style.css

style.css

body{
		background: #FF6660;
	}

form{
	width: 205px;
	margin:auto;
	background: #3E3E3E;
	border-radius: 1%;
	box-shadow: 0px 3px 8px #000;
}
input[type=text]{
	width: 196px;
	border: none;
	border-bottom: 1px solid grey;
	font-size: 18px;
	color:#fff;
	background: none;
}
td{
	padding:0px;
}
button{
	border:none;
	padding: 20px;
	width: 100%;
	cursor: pointer;
	color:grey;
	background: none;
}
button:hover{
	background: grey;
	color:#fff;
}
h2{
	font-family: 'Encode Sans Condensed', sans-serif;
	color:#666;
	margin-bottom: 0;
	text-align: center;
	margin-top: 6px;
}
.orange{
	color: orange;
	text-align: justify;
}
h1{
	font-family: 'Encode Sans Condensed', sans-serif;
	color: #fff;
	font-size: 29px;
	border-bottom: 3px solid #fff;
}
div{
	width: 200px;
	margin:auto;
}

maka hasilnya akan seperti gambar di bawah ini..

sekian tutorial Desain Kalkulator dengan HTML & CSS, semoga bermanfaat yah teman teman 😀