JSFiddle - React, Tailwind, and code Playground

by Daniel Cheung

HTML

<button>A</button>

CSS

button {
  background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #cccccc 100%);
background: -webkit-linear-gradient(top, #ffffff 0%,#cccccc 100%);
background: linear-gradient(to bottom, #ffffff 0%,#cccccc 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#cccccc',GradientType=0 );
  font-size: 24px;
  color: #333;
  width: 60px;
  height: 60px;
  border-radius: 30px;
  border: none;
  box-shadow: inset 0 1px 2px #fff, 0 4px 5px rgba(0,0,0,0.7);
}
button:hover {
  background: #fff;
}

button:active {
  padding:0;
  padding-top: 3px;
  box-shadow: inset 0 3px 3px rgba(0,0,0,0.7), 0 2px 0px 1px #fff;
  background: #cccccc;
background: -moz-linear-gradient(top, #cccccc 0%, #ffffff 100%);
background: -webkit-linear-gradient(top, #cccccc 0%,#ffffff 100%);
background: linear-gradient(to bottom, #cccccc 0%,#ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#ffffff',GradientType=0 );
}

body {
  background-color: #D5D5D5;
}