I want to recreate a calculator keyboard with css

Question

I wanted to recreate this calculator in css: Calculator

But i can do those square separators around the buttons. I've tried to create a div around the button's but it doesnt seem to work as the keyboard flips out of place

JSBin

  <div id="calculator">

    <div class="output">
      <p>1234</p>
    </div>

    <div class="squareborder">
      <button class="minus">c</button>
    </div>
    <button class="minus">cm</button>
    <button class="equal">%</button>
    <button class="equal">rm</button>
    <button>7</button>
    <button>8</button>
    <button>9</button>
    <button class="equal">÷</button>
    <button>4</button>
    <button>5</button>
    <button>6</button>
    <button class="equal">x</button>
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button class="minus">-</button>
    <button>0</button>
    <button>•</button>
    <button class="equal">=</button>
    <button class="plus">+</button>
  </div>
</body>
</html>

Answer 1

There is surely multiple ways to do it but this is how I would do it...

• wrap each line of buttons into a <div class="row"> element to apply flex
• wrap each button into <span class="squareborder"> element for the border
• style the squareborder class with box-shadow for the depth

I also had to play with the CSS a little but nothing too fancy!

By the way... your calculator is reeeeaaaallllyyy sweet, good job mate

#calculator {
  background-color: #918764;
  width: 12.5em;
  padding: 2em 0 0.8em;
}

.output {
  box-shadow: inset 0 1.6em rgba(255, 255, 255, 0.1);
  font-family: 'Krona One', sans-serif;
  font-size: 10pt;
  background-color: #3d0000;
  color: #e8001f;
  width: 13em;
  padding: 0 0.7em;
  display: flex;
  justify-content: flex-end;
  align-content: center;
  margin: 0 auto 0.3em;
  border: none;
  border-radius: 0.3em;
}

button {
  font-family: 'Krona One', sans-serif;
  background-color: #988d6d;
  color: #fffde7;
  border: none;
  width: 2.6em;
  margin: 0.3em;
  padding: 0.7em 0.6em;
  border-radius: 4em;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
  display: flex;
  justify-content: center;
  cursor: pointer;
}

button.equal {
  background-color: #21302b
}

button.plus {
  background-color: #21302b;
  color: #2ea4ee;
}

button.minus {
  background-color: #21302b;
  color: #89734e;
}

.row {
  display: flex;
  justify-content: center;
}

.squareborder {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), inset 0 1px 3px rgba(0, 0, 0, 0.4);
  border-radius: 0.2em;
  margin: 1px;
  padding: 2px
}

<link href="https://fonts.googleapis.com/css?family=Krona+One&display=swap" rel="stylesheet">

<div id="calculator">

  <div class="output">
    <p>1234</p>
  </div>

  <div class="row">
    <span class="squareborder">
      <button class="minus">c</button>
    </span>
    <span class="squareborder">
      <button class="minus">cm</button>
    </span>
    <span class="squareborder">
      <button class="equal">%</button>
    </span>
    <span class="squareborder">
      <button class="equal">rm</button>
    </span>
  </div>

  <div class="row">
    <span class="squareborder">
      <button>7</button>
    </span>
    <span class="squareborder">
      <button>8</button>
    </span>
    <span class="squareborder">
      <button>9</button>
    </span>
    <span class="squareborder">
      <button class="equal">÷</button>
    </span>
  </div>

  <div class="row">
    <span class="squareborder">
      <button>4</button>
    </span>
    <span class="squareborder">
      <button>5</button>
    </span>
    <span class="squareborder">
      <button>6</button>
    </span>
    <span class="squareborder">
      <button class="equal">x</button>
    </span>
  </div>

  <div class="row">
    <span class="squareborder">
      <button>1</button>
    </span>
    <span class="squareborder">
      <button>2</button>
    </span>
    <span class="squareborder">
      <button>3</button>
    </span>
    <span class="squareborder">
      <button class="minus">-</button>
    </span>
  </div>

  <div class="row">
    <span class="squareborder">
      <button>0</button>
    </span>
    <span class="squareborder">
      <button>*</button>
    </span>
    <span class="squareborder">
      <button class="equal">=</button>
    </span>
    <span class="squareborder">
      <button class="plus">+</button>
    </span>
  </div>
</div>