JSFiddle - React, Tailwind, and code Playground

by Daniel Cheung

HTML

<button class="btn-gray">Button</button>

CSS

.btn-gray {
  background: #f2f2f2;
  background: -moz-linear-gradient(top, #f2f2f2 0%, #e5e5e5 100%);
  background: -webkit-linear-gradient(top, #f2f2f2 0%,#e5e5e5 100%);
  background: linear-gradient(to bottom, #f2f2f2 0%,#e5e5e5 100%);
  border: 1px solid #CBD0CF;
  border-bottom-color: #888889;
  border-radius: 3px;
  padding: 10px 30px;
  box-shadow: inset 0 0 2px -1px #fff, 0 1px 2px rgba(0,0,0,0.4);
  color: #5A5A5C;
  text-shadow: 0 1px #fff;
  transition: 0.2s box-shadow ease-in-out;
}

.btn-gray:active {
  border-color: #4D4D4D;
  background: #6b6b6b;
  background: -moz-linear-gradient(top, #6b6b6b 0%, #a3a3a3 100%);
  background: -webkit-linear-gradient(top, #6b6b6b 0%,#a3a3a3 100%);
  background: linear-gradient(to bottom, #6b6b6b 0%,#a3a3a3 100%);
  color:#fff;
  text-shadow: 0 1px #585858;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.4), 0 1px 2px rgba(255,255,255,0.4);
}