I Create Simple Calculator With Html & Css
I Create Simple Calculator With Html & Css
<!DOCTYPE html>
<html lang="en-US" >
<!--------- Head Start ------->
<head>
<link rel="stylesheet" type="text/css" href="Calculator.css">
<meta charset="UTF-8"/>
<title> Calculator </title>
<!-- Css start her -->
<style>
*{
margin:0;
padding:0;
}
body{
background: #dde1e7;
}
/* Design start from here */
.Whole_Calculator{
width: 230px;
height: 350px;
margin: 60px auto;
border-radius: 30px;
box-shadow: 2px 2px 5px black,
-5px -4px 4px #ffffff;
}
/* Result Board */
#result{
border:none;
outline:none;
border-radius: 50px;
background:none;
margin: 20px 19px;
padding-bottom: 26px;
padding-right:13px;
box-shadow: inset 1px 1px 5px black,
inset -3px -5px 4px white;
}
/* Button Container */
.container {
margin: 15px 12px;
}
/* Button Design */
.AllButton {
margin: 0px 4px;
padding: 12px 16px 12px 16px;
border:none;
outline:none;
border-radius: 100%;
background:none;
box-shadow: 1px 1px 3px #333, -2.5px -2px 4px white;
font-size: 13px;
font-weight: 500;
cursor:pointer;
}
/* Specific Black Math Button */
#MathButton{
background:black;
color:white;
}
</style>
</head>
<!---------- Head End --------->
<!----------- Body Start --------->
<body>
<div class="Whole_Calculator">
<input type="text" id="result" readonly="readonly" >
<br>
<div class="container">
<div class="one">
<input type="button" class="AllButton" value="7">
<input type="button" class="AllButton" value="8">
<input type="button" class="AllButton" value="9">
<input type="button" class="AllButton" id="MathButton" value="+">
</div>
<br>
<div class="two">
<input type="button" class="AllButton" value="4">
<input type="button" class="AllButton" value="5">
<input type="button" class="AllButton" value="6">
<input type="button" class="AllButton" id="MathButton" value="–">
</div>
<br>
<div class="three">
<input type="button" class="AllButton" value="1">
<input type="button" class="AllButton" value="2">
<input type="button" class="AllButton" value="3">
<input type="button" class="AllButton" id="MathButton" value="×">
</div>
<br>
<div class="four">
<input type="button" class="AllButton" id="Clear" value="C">
<input type="button" class="AllButton" value="0">
<input type="button" class="AllButton" id="MathButton" value="=">
<input type="button" class="AllButton" id="MathButton" value="÷">
</div>
</div>
</div>
</body>
<!------- Body End -------->
</html>
No comments