JSFiddle - React, Tailwind, and code Playground

HTML

Here is some reference text to compare sizes: <br />
1-2-3-4-5-6-7-8-9-10<br />
<input type="button" value="Some button" />

CSS

body { padding: 25px; }

button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {border:0;padding:0;margin:0;}

input[type=button],
input[type=submit],
button,
.button {
  display: inline-block;
  background-color: #fff;
  color: #222;
  border: none;
  padding: 4px 6px;
  margin: 1px;
  cursor: pointer;
  border-radius: 2px 2px 2px 2px;
  -webkit-border-radius: 2px 2px 2px 2px;
  -moz-border-radius: 2px 2px 2px 2px;
  -o-border-radius: 2px 2px 2px 2px;
  box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.5);
  -moz-box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.5);
  -webkit-box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.5);
  -o-box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.5);
}
input[type=button]:hover,
input[type=submit]:hover,
button:hover,
.button:hover {
  padding: 5px 7px;
  margin: 0px;
  box-shadow: 0px 0px 5px 4px rgba(0,0,0,0.5);
  -moz-box-shadow: 0px 0px 5px 4px rgba(0,0,0,0.5);
  -webkit-box-shadow: 0px 0px 5px 4px rgba(0,0,0,0.5);
  -o-box-shadow: 0px 0px 5px 4px rgba(0,0,0,0.5);
}
input[type=button]:active,
input[type=submit]:active,
button:active,
.button:active {
  background-color: #ddd;
  padding: 4px 6px;
  margin: 1px;
  box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.5);
  -moz-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.5);
  -webkit-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.5);
  -o-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.5);
}