JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<div class="button-container">
  <button>
  </button>
</div>

CSS

body {
  background-color: #EDECEC;
}

/*gradient around button*/
.button-container {
  position: relative;
  width:40px;
  height: 40px;
  padding: 4px;
  border-radius: 40px;
  background: -webkit-linear-gradient(top, rgba(178,174,162,0.99) 0%,rgba(178,174,162,0.99) 23%,rgba(211,209,202,0.83) 56%,rgba(255,255,255,0.23) 100%);
}

/*shadow below button*/
.button-container:after{
  content:"";
  position: absolute;
  top:12px;
  left: 4px; right: 4px;
  height:63px;
  background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(153,153,153,0) 100%);
  border-radius:50px/70px;
  box-shadow:inset 0 0 14px 7px #EDECEC,
              inset 0 0 0 1px #EDECEC; /*#edecec = body background-color*/
  -webkit-transition: 0.2s;
}

button {
  position: relative; z-index: 1;
  vertical-align: bottom;
  height: 40px;
  width: 40px;
  padding: 0;
  border: 1px solid #4E7D43;
  border-radius: 40px;
  background-image: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.4) 0%,rgba(255,255,255,0.17) 31%,rgba(178,185,176,0) 58%,rgba(58,75,53,0) 100%), -webkit-linear-gradient(top, rgba(58,75,53,1) 0%,rgba(117,137,109,1) 100%);
  background-position: 0 18px, 0 0;
  background-repeat: no-repeat;
  box-shadow: 0 0 0 1px black,
              0 2px 0  rgba(0,0,0,0.2),
              inset 0 0px 8px 1px rgba(0,0,0,0.16);
  -webkit-transition: 0.2s;
}

.button-container:active:after {
  opacity: 0;
}

.button-container:active button {
    box-shadow: 0 0 0 1px rgba(0,0,0,0.7),
              inset 0 0px 8px 1px rgba(0,0,0,0.16);
}

JavaScript

/* BRAUN style CSS Button*/