<form name="calculator">
  <table>
    <tr>
      <td colspan="4"><input type="text" name="display" id="display" disabled></td>
    </tr>

    <tr>
      <td><input class="btn" type="button" name="one" value="1" onclick="calculator.display.value  += '1' "></td>
      <td><input class="btn" type="button" name="two" value="2" onclick="calculator.display.value  += '2' "></td>
      <td><input class="btn" type="button" name="three" value="3" onclick="calculator.display.value  += '3' "></td>
      <td><input class="btn" class="operator" type="button" name="plus" value="+" onclick="calculator.display.value  += '+' "></td>
    </tr>

    <tr>
      <td><input class="btn" type="button" name="four" value='4' onclick="calculator.display.value  += '4' "></td>
      <td><input class="btn" type="button" name="five" value="5" onclick="calculator.display.value  += '5' "></td>
      <td><input class="btn" type="button" name="six" value="6" onclick="calculator.display.value  += '6' "></td>
      <td><input class="btn" class="operator" type="button" name="minus" value="-" onclick="calculator.display.value  += '-' "></td>
    </tr>

    <tr>
      <td><input class="btn" type="button" name="seven" value='7' onclick="calculator.display.value  += '7' "></td>
      <td><input class="btn" type="button" name="eight" value="8" onclick="calculator.display.value  += '8' "></td>
      <td><input class="btn" type="button" name="nine" value="9" onclick="calculator.display.value  += '9' "></td>
      <td><input class="btn" class="operator" type="button" name="multiply" value="x" onclick="calculator.display.value  += '*' "></td>
    </tr>

    <tr>
      <td><input class="btn" type="button" id="clear" name="clean" value='C' onclick="calculator.display.value  = '' "></td>
      <td><input class="btn" type="button" name="zero" value="0" onclick="calculator.display.value  += '0' "></td>
      <td><input class="btn" id="equal" type="button" name="equal" value="=" onclick="calculator.display.value  = eval(calculator.display.value) "></td>
      <td><input class="btn" class="operator" type="button" name="divide" value="/" onclick="calculator.display.value  += '/' "></td>

    </tr>

    <tr>

      <td><input class="btn" class="operator" type="button" name="square" value="x2" onclick="calculator.display.value  = eval(Math.pow(calculator.display.value,2)) "></td>
      <td><input class="btn" class="operator" type="button" name="square" value="x" onclick="calculator.display.value  = eval(Math.sqrt(calculator.display.value)) "></td>
      <td><input class="btn" class="operator" type="button" name="dot" value="." onclick="calculator.display.value  += '.' "></td>
      <td><input class="btn" class="operator" type="button" name="square" value="%" onclick="calculator.display.value  = eval(calculator.display.value/100) "></td>

    </tr>
  </table>
</form>
body {
  background: #4568dc; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to right,
    #b06ab3,
    #4568dc
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to right,
    #b06ab3,
    #4568dc
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  overflow-x: hidden;
}

table {
  margin: auto;
  margin-top: 100px;
  background: #cb356b; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to right,
    #bd3f32,
    #cb356b
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to right,
    #bd3f32,
    #cb356b
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

input {
  padding: 10px 30px;
  margin: 15px;
  font-size: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  text-align: center;
  font-weight: 400;
  font-family: sans-serif;
  border-radius: 7px;
}

input:hover {
  color: white;
  background-color: black;
  transition: 0.5;
  font-size: 30px;
  box-shadow: 1px 1px 2px 2px seagreen;
}

#display {
  color: #fff;
  width: 300px;
  border-radius: 7px;
  font-size: 35px;
  background-color: grey;
}

#display:hover {
  background-color: royalblue;
  box-shadow: 1px 1px 2px 2px #ff45;
}

.operator {
  color: tomato;
}

.operator:hover {
  box-shadow: 1px 1px 2px 2px rebeccapurple;
}

#clear {
  color: red;
  background-color: black;
}

#clear:hover {
  color: white;
  box-shadow: 1px 1px 2px 2px steelblue;
}

#equal:hover {
  color: tomato;
  font-weight: bold;
  box-shadow: 1px 1px 2px 2px goldenrod;
}
// this is a simple calculator using html css js .

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.