<a id="button" href="#">
  <span class="b b1"><span class="b b5">Push</span></span>
  <span class="b b2"></span>
  <span class="b b3"></span>
  <span class="b b4"></span>
  <span class="b b6"></span>
  </a>

#button {
  margin: 0 auto;
  display: block;
  width: 200px;
  height: 184px;
  position: relative;
  text-decoration: none;
}

#button:active .b1 {
  top: 20px;
}

#button:active .b6 {
  height: 0;
}

.b {
  position: absolute;
  left: 11px;
  display: block;
  width: 178px;
  height: 142px;
  border-radius: 89px / 71px;
  -webkit-border-radius: 89px / 71px;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  -ms-transition: all 0.2s;
}

.b1 {
  z-index: 3;
  background: #ed5728;
  background-image: -webkit-radial-gradient(30% 30%, #efb45c, #ec3f1b);
  background-image: -moz-radial-gradient(30% 30%, #efb45c, #ec3f1b);
  background-image: -ms-radial-gradient(30% 30%, #efb45c, #ec3f1b);
  background-image: -o-radial-gradient(30% 30%, #efb45c, #ec3f1b);
  -webkit-perspective: 240;
  -moz-perspective: 240;
  -ms-perspective: 240;
  -o-perspective: 240;
}
.b2 {
  height: 90px;
  top: 76px;
  z-index: 2;
  background: #8b1916;
  background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #ec431d), color-stop(0.7, #8a1916), color-stop(1, #e33b1b));
  background-image: -webkit-linear-gradient(left, #ec431d, #8a1916 70%, #e33b1b);
  background-image: -moz-linear-gradient(left, #ec431d, #8a1916 70%, #e33b1b);
  background-image: -ms-linear-gradient(left, #ec431d, #8a1916 70%, #e33b1b);
  background-image: -o-linear-gradient(left, #ec431d, #8a1916 70%, #e33b1b);
  border-radius: 10px 10px 89px 89px / 15px 15px 71px 71px;
  box-shadow: 0 10px 2px rgba(176, 93, 87, 0.5);
  -webkit-border-radius: 10px 10px 89px 89px / 15px 15px 71px 71px;
  -webkit-box-shadow: 0 10px 2px rgba(176, 93, 87, 0.5);
}
.b3 {
  width: 198px;
  height: 160px;
  top: 16px;
  left: 0;
  z-index: 1;
  background: #a2abb7;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#d5dce2), to(#a2abb7));
  background-image: -webkit-linear-gradient(#d5dce2, #a2abb7);
  background-image: -moz-linear-gradient(#d5dce2, #a2abb7);
  background-image: -ms-linear-gradient(#d5dce2, #a2abb7);
  background-image: -o-linear-gradient(#d5dce2, #a2abb7);
  border: 1px solid #d4d8dc;
  border-radius: 100px / 80px;
  -webkit-border-radius: 100px / 80px;
}
.b4 {
  width: 200px;
  height: 160px;
  top: 24px;
  left: 0;
  z-index: 0;
  background: #bfc7d0;
  background-image: -webkit-gradient(linear, left top, right top, from(#99a2ae), color-stop(0.3, #fff), color-stop(0.7, #414348), to(#c8cdd1));
  background-image: -webkit-linear-gradient(left, #99a2ae, #fff 30%, #414348 70%, #c8cdd1);
  background-image: -moz-linear-gradient(left, #99a2ae, #fff 30%, #414348 70%, #c8cdd1);
  background-image: -ms-linear-gradient(left, #99a2ae, #fff 30%, #414348 70%, #c8cdd1);
  background-image: -o-linear-gradient(left, #99a2ae, #fff 30%, #414348 70%, #c8cdd1);
  border-radius: 100px / 80px;
  -webkit-border-radius: 100px / 80px;
}
.b5 {
  left: 0;
  z-index: 4;
  text-align: center;
  line-height: 142px;
  color: #fff;
  font-size: 50px;
  text-transform: uppercase;
  text-decoration: none;
  -webkit-transform: rotateX(30deg);
  -moz-transform: rotateX(30deg);
  -ms-transform: rotateX(30deg);
  -o-transform: rotateX(30deg);
}
.b6 {
  height: 20px;
  top: 76px;
  z-index: 2;
  background: #8b1916;
  background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #ec431d), color-stop(0.7, #8a1916), color-stop(1, #e33b1b));
  background-image: -webkit-linear-gradient(left, #ec431d, #8a1916 70%, #e33b1b);
  background-image: -moz-linear-gradient(left, #ec431d, #8a1916 70%, #e33b1b);
  background-image: -ms-linear-gradient(left, #ec431d, #8a1916 70%, #e33b1b);
  background-image: -o-linear-gradient(left, #ec431d, #8a1916 70%, #e33b1b);
  border-radius: 5px;
  -webkit-border-radius: 5px;
}