Square buttons ML

by Manuel Souto Pico

HTML

<div class="tile_div">

  <input id="neg" class="butt" type="button" value="≠" />
  <input class="butt" type="button" value="Aa" />
  <input id="entire_words" class="butt" type="button" value="[abc]" />
  <input class="butt" type="button" value="[…]" />
  <input class="butt" type="button" value="+w" />
  <input class="butt" type="button" value=".*" />
  <input class="butt" type="button" value="?*" />
</div>

<!-- https://stackoverflow.com/questions/15823871/how-to-make-a-square-button ->>

CSS

.butt {
  height: 25px;
  width: 25px;
  cursor: pointer;
  background: #3d85c6;
  background: -webkit-linear-gradient(#3d85c6, #073763);
  background: linear-gradient(#3d85c6, #073763);
  border: 1px solid #556699;
  border-radius: 3px;
  color: #ffffff;
  display: inline-block;
  text-align: center;
  text-shadow: 1px 1px #000000;
  padding: 1px;
  vertical-align: middle;
}

.butt:not(#entire_words) {
  font: normal 900 15px/1 "Calibri", sans-serif;
}

#entire_words {
  font: normal 900 10px/1 "Calibri", sans-serif;
}

.tile_div {
  vertical-align: middle;
  display: inline-block;
}