Pure CSS Working Calculator

Hello friends! Are you want to learn a better way of HTML and CSS? In this tutorial. This is awesome and I like it more how we can make a calculator using only HTML and CSS? Every developer wants their output most be different and attractive. Without using another programming language we can create such a beautiful calculator using HTML and CSS only. I hope you will like this tutorial. So In this tutorial, I am going to show how to make a working calculator using HTML and CSS only. Copy the given source code and paste it into your text editor and run it in your browser. You can also modify and make more attractive adding CSS.

 

HTML

<!DOCTYPE html>
<html>
<head>
<title> Pure CSS calculator</title>
<link href='https://fonts.googleapis.com/css?family=Orbitron' rel='stylesheet' type='text/css'>
<link rel ="stylesheet" href ="style.css">
</head>
<body>
<div class="wrap">
	<fieldset class="container">
		<form name="calculator">

			<input id="display" type="text" name="display" readonly>

			<input class="button digits" type="button" value="7" onclick="calculator.display.value += '7'">
			<input class="button digits" type="button" value="8" onclick="calculator.display.value += '8'">
			<input class="button digits" type="button" value="9" onclick="calculator.display.value += '9'">
			<input class="button mathButtons" type="button" value="+" onclick="calculator.display.value += ' + '">
			<br>
			<input class="button digits" type="button" value="4" onclick="calculator.display.value += '4'">
			<input class="button digits" type="button" value="5" onclick="calculator.display.value += '5'">
			<input class="button digits" type="button" value="6" onclick="calculator.display.value += '6'">
			<input class="button mathButtons" type="button" value="-" onclick="calculator.display.value += ' - '">
			<br>
			<input class="button digits" type="button" value="1" onclick="calculator.display.value += '1'">
			<input class="button digits" type="button" value="2" onclick="calculator.display.value += '2'">
			<input class="button digits" type="button" value="3" onclick="calculator.display.value += '3'">
			<input class="button mathButtons" type="button" value="x" onclick="calculator.display.value += ' * '">
			<br>
			<input id="clearButton" class="button" type="button" value="C" onclick="calculator.display.value = ''">
			<input class="button digits" type="button" value="0" onclick="calculator.display.value += '0'">
			<input class="button mathButtons" type="button" value="=" onclick="calculator.display.value = eval(calculator.display.value)">
			<input class="button mathButtons" type="button" value="/" onclick="calculator.display.value += ' / '">
		</form>
	</fieldset>
</div>
</body>
</html>

CSS

body {
	background-color: #262626;
	}
.container {
	top:50%;
	left:50%;
	position:absolute;
	transform:translate(-50%,-50%);
	width: 250px;
	padding: 8px 8px 20px 8px;
	margin: 20px auto;
	background-color: #ABABAB;
	border-radius: 4px;
	border-top: 2px solid #FFF;
	border-right: 2px solid #FFF;
	border-bottom: 2px solid #C1C1C1;
	border-left: 2px solid #C1C1C1;
	box-shadow: -3px 3px 7px rgba(0, 0, 0, .6);
}
#display {
	display: block;
	margin: 15px auto;
	height: 50px;
	width: 250px;
	padding: 0 10px;
	border-radius: 4px;
	border-top: 2px solid #C1C1C1;
	border-right: 2px solid #C1C1C1;
	border-bottom: 2px solid #FFF;
	border-left: 2px solid #FFF;
	background-color: #FFF;
	box-shadow: inset 0px 0px 10px #030303;
	font-size: 28px;
	color: #000;
	text-align: right;
	font-weight:bold;
	font-family: Orbitron;
}
.button {
	display: inline-block;
	margin: 3px;
	width: 60px;
	height: 60px;
	font-size: 25px;
	font-weight: bold;
	border-radius: 4px;
	box-sizing:border-box;
	font-family: Orbitron;
}
.mathButtons {
	margin: 2px 2px 6px 2px;
	color: #FFF;
	text-shadow: -1px -1px 0px #44006F;
	background-color: #434343;
	border-top: 2px solid #C1C1C1;
	border-right: 2px solid #C1C1C1;
	border-bottom: 2px solid #181818;
	border-left: 2px solid #181818;
	box-shadow: 0px 0px 2px #030303;
}
.digits {
	color: #181818;
	text-shadow: 1px 1px 0px #FFF;
	background-color: #EBEBEB;
	border-top: 2px solid #FFF;
	border-right: 2px solid #FFF;
	border-bottom: 2px solid #C1C1C1;
	border-left: 2px solid #C1C1C1;
	border-radius: 4px;
	box-shadow: 0px 0px 2px #030303;
}
.digits:hover,
.mathButtons:hover,
#clearButton:hover {
	background-color: #FFBA75;
	box-shadow: 0px 0px 2px #FFBA75;
	border-top: 2px solid #FFF;
	border-right: 2px solid #FFF;
	border-bottom: 2px solid #AE5700;
	border-left: 2px solid #AE5700;
}

#clearButton {
	color: #FFF;
	text-shadow: -1px -1px 0px #44006F;
	background-color: #D20000;
	border-top: 2px solid #FF8484;
	border-right: 2px solid #FF8484;
	border-bottom: 2px solid #800000;
	border-left: 2px solid #800000;
	box-shadow: 0px 0px 2px #030303;
}

Leave a Comment