[class*="push"] {
  position: relative;
  display: inline-block;
  width: 70px;
  height: 70px;
  border: 0;
  margin: 0.5rem;
  outline: none;
  background-color: #c2290a;
  border-radius: 50%;
  cursor: pointer;
  transition: box-shadow 100ms;
}

.push--flat {
  box-shadow: inset 0 2.1875px 0 #da2e0b, inset 0 -2.1875px 0 #aa2409,
    inset 0 0 0 2.1875px #b32609, inset 0 0 0 5.8333333333px #c2290a,
    inset 0 0 0 7px #611405, inset 0 0 0 7.6086956522px black,
    inset 0 0 0 9.3333333333px rgba(247, 133, 110, 0.7),
    inset 0 0 0 12.7272727273px #c2290a, inset 0 28px 9.3333333333px #aa2409,
    inset 0 0 7px 11.6666666667px #911f08, 0 3.5px 0 rgba(0, 0, 0, 0.3);
}
.push--flat:after {
  content: "";
  position: absolute;
  bottom: 3.5px;
  left: 7px;
  display: block;
  width: 56px;
  height: 56px;
  border: 4.6666666667px solid rgba(0, 0, 0, 0.3);
  border-width: 0 0 4.6666666667px;
  border-radius: 50%;
  transition-duration: 100ms;
}
.push--flat:active,
.push--flat.is-pushed {
  box-shadow: inset 0 2.1875px 0 #da2e0b, inset 0 -2.1875px 0 #aa2409,
    inset 0 0 0 2.1875px #b32609, inset 0 0 0 5.8333333333px #c2290a,
    inset 0 0 0 7px #611405, inset 0 0 0 8.2352941176px black,
    inset 0 0 0 9.3333333333px rgba(247, 133, 110, 0.2),
    inset 0 0 0 12.7272727273px #b32609, inset 0 28px 9.3333333333px #9b2108,
    inset 0 0 7px 11.6666666667px #791a06, 0 3.5px 0 rgba(0, 0, 0, 0.3);
  background-color: #b8270a;
}
.push--flat:active:after,
.push--flat.is-pushed:after {
  bottom: 8.1666666667px;
  border-width: 0;
}

.push--skeuo {
  box-shadow: inset 0 2.9166666667px 0 #da2e0b,
    inset 0 -2.9166666667px 1.1666666667px #aa2409, 0 0 1.1666666667px #c2290a,
    inset 0 0 2.3333333333px #791a06,
    inset 0 0 2.3333333333px rgba(51, 51, 51, 0.5),
    inset 0 0 1.1666666667px 5.8333333333px #c2290a,
    inset 0 -2.3333333333px 1.75px 7px rgba(51, 51, 51, 0.7),
    inset 0 0 1.1666666667px 7px #611405,
    inset 0 0 1.1666666667px 7px rgba(51, 51, 51, 0.7),
    inset 0 0 0.5833333333px 7.6086956522px black,
    inset 0 0 0.5833333333px 8.75px rgba(247, 133, 110, 0.7),
    inset 0 3.5px 0 8.2352941176px rgba(244, 71, 37, 0.7),
    inset 0 -3.5px 1.1666666667px 8.2352941176px rgba(145, 31, 8, 0.2),
    inset 0 0 0 12.7272727273px #c2290a, inset 0 28px 9.3333333333px #aa2409,
    inset 0 0 7px 11.6666666667px #911f08, 0 1.75px 3.5px rgba(0, 0, 0, 0.5);
}
.push--skeuo:active,
.push--skeuo.is-pushed {
  box-shadow: inset 0 2.9166666667px 0 #da2e0b,
    inset 0 -2.9166666667px 1.1666666667px #aa2409, 0 0 1.1666666667px #c2290a,
    inset 0 0 2.3333333333px #791a06,
    inset 0 0 2.3333333333px rgba(51, 51, 51, 0.5),
    inset 0 0 1.1666666667px 5.8333333333px #c2290a,
    inset 0 -2.3333333333px 1.75px 7px rgba(51, 51, 51, 0.7),
    inset 0 0 1.1666666667px 7px #611405,
    inset 0 0 1.1666666667px 7px rgba(51, 51, 51, 0.7),
    inset 0 0 1.75px 8.2352941176px black,
    inset 0 0 0.5833333333px 9.3333333333px rgba(247, 133, 110, 0.2),
    inset 0 3.5px 0 28px rgba(244, 71, 37, 0.5),
    inset 0 -3.5px 1.1666666667px 28px rgba(97, 20, 5, 0.2),
    inset 0 0 0 12.7272727273px #b32609, inset 0 28px 9.3333333333px #9b2108,
    inset 0 0 7px 11.6666666667px #791a06, 0 1.75px 3.5px rgba(0, 0, 0, 0.5);
  background-color: #b8270a;
}
.push--skeuo:active:before,
.push--skeuo.is-pushed:before {
  opacity: 0.5;
}
.push--skeuo:before {
  content: "";
  position: absolute;
  bottom: 15.5555555556px;
  left: 19.4444444444px;
  display: block;
  width: 31.8181818182px;
  height: 21.2121212121px;
  background: rgba(247, 133, 110, 0.2);
  background: linear-gradient(
    to top,
    rgba(250, 173, 158, 0.3) 0%,
    rgba(194, 41, 10, 0.1) 100%
  );
  border-radius: 40% 40% 60% 60%;
  transition: opacity 200ms;
}