A CodePen by Abdur Jabbar. 3D button using inset box shadows

index.html

<input class="button" type="checkbox">
<div id="bg"></div>

style.css

#bg {
  position: fixed;
  margin-left: -10px;
  width: 100%;
  height: 200%;
  background-color: rgba(0,0,0,0.2);
  background-image: -webkit-linear-gradient(bottom, rgba(0,0,0,0.3), white), -webkit-linear-gradient(bottom, black, white);
  background-position: 0 0;
  -webkit-transition: background-position .25s;
  z-index: -3;
}

.button {
  cursor: pointer;
  top: 25%;
  -webkit-appearance: button;
  position: absolute;
  left: 40%;
  width: 200px;
  height: 100px;
  background-image: -webkit-linear-gradient(left, rgba(0,0,0,0.2), transparent), -webkit-linear-gradient(top, rgba(0,0,0,0.4), rgba(0,0,0,0.6)), -webkit-linear-gradient(45deg, rgba(0,0,50,0.5), rgba(0,0,151,0.6));
  background-position: 0 0, 0 0, 0 0, 2px 2px;
  background-repeat: no-repeat, no-repeat, repeat, repeat;
  background-size: 100% 100%, 100% 100%, 100% 100%, 4px 40px;
  border-radius: 5em;
  border: inset 2px grey;
  box-shadow: inset 25px 25px 10px 0px rgba(155,155,255,0.15), inset 5px 5px 10px 0px rgba(155,155,255,0.15), inset 15px 15px 10px 0px rgba(155,155,155,0.15), inset -5px -5px 0px 0px rgba(0,0,0,0.2),  inset -15px -15px 10px 0px rgba(0,0,0,0.2),  inset -25px -25px 10px 10px rgba(0,0,0,0.2);
  -webkit-box-reflect: below 5px -webkit-linear-gradient(bottom, rgba(255,255,255,0.2), transparent);
  -webkit-transition: all 150ms;
  text-align: center;
  padding-top: 25px;
  
}

.button:hover {
  background-position: -10px -10px, -10px -10px, -10px -10px, -10px -10px;
  background-repeat: no-repeat, no-repeat, repeat, repeat;
  background-size: 100% 100%, 200% 200%, 100% 100%, 4px 40px;
}

.button:checked {
  -webkit-perspective: 10;
  box-shadow: inset 0 0 15px 55px rgba(255,0,0,0.1);
  -webkit-animation: shake 1s 1;
  box-shadow: inset 0 0 25px 5px rgba(0,0,0,0.4), inset -5px -5px 0px 0px rgba(0,0,0,0.1);
  border-style: inset;
  border-width: 4px;
}

.button:checked + #bg{
  background-position: 0 -200px;
  
}

@-webkit-keyframes shake {
  from{-webkit-transform: rotate3d(1,1,0,0deg);}
  2%{-webkit-transform: scale3d(1.1,1.1,0);}
  5%, 15%{-webkit-transform: scale3d(1,1,1);}
  7%{-webkit-transform: scale3d(1,0.9,1);}
  9%{-webkit-transform: scale3d(0.9,1,1);}
  to{-webkit-transform: rotate3d(1,1,0,0deg);}
}

.button:before {
  content: "Click Me";
  position: relative;
  font-family: sans-serif;
  font-size: 3em;
  color: rgba(255,255,255,0.8);
  text-shadow: 0px 2px 3px black;
}

.button:checked:before {
  content: "Clicked";
  position: relative;
  font-family: sans-serif;
  font-size: 3em;
  color: rgba(255,255,255,0.8);
  text-shadow: 0px 2px 3px black;
}