<h1>You Should Totally Press the Button.</h1>
<button class="button perspective red">
  Press Me!
</button>

*,*:before,*:after {
  box-sizing:border-box;
}

@mixin transition($transition){
  -webkit-transition:$transition;
  -moz-transition:$transition;
  -ms-transition:$transition;
  -o-transition:$transition;
  transition:$transition;
}

h1 {
  font-size:40px;
  line-height:40px;
  margin:50px 0;
  text-align:center;
  color:#858585;
}

body {
  font-family:helvetica neue, helvetica, arial, sans-serif;
  font-weight:200;
}

button {
  position:relative;
  background:transparent;
  border:none;
  outline:none;
  display:block;
  height:120px;
  width:350px;
  padding:40px;
  font-size:40px;
  line-height:40px;
  font-weight:100;
  text-transform:uppercase;
  margin:0 auto;
  border-radius:10px;
  top:0;
  @include transition(.15s ease-in-out);
  &.perspective{
    -webkit-transform:perspective( 500px ) rotateX( 35deg );
    &:before {
      content:'Press Me!';
      display:block;
      position:absolute;
      z-index:1;
      color:white;
      text-shadow:0 2px 2px rgba(0,0,0,.4);
      background: #f25d30; /* Old browsers */
      background: -moz-linear-gradient(top,  #f25d30 0%, #e03b00 100%); /* FF3.6+ */
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f25d30), color-stop(100%,#e03b00)); /* Chrome,Safari4+ */
      background: -webkit-linear-gradient(top,  #f25d30 0%,#e03b00 100%); /* Chrome10+,Safari5.1+ */
      background: -o-linear-gradient(top,  #f25d30 0%,#e03b00 100%); /* Opera 11.10+ */
      background: -ms-linear-gradient(top,  #f25d30 0%,#e03b00 100%); /* IE10+ */
      background: linear-gradient(to bottom,  #f25d30 0%,#e03b00 100%); /* W3C */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f25d30', endColorstr='#e03b00',GradientType=0 ); /* IE6-9 */
      top:0;
      left:0;
      border-radius:10px;
      width:100%;
      height:100%;
      padding:40px;
      box-shadow:inset 0 -2px 5px rgba(255,255,255,.3)
    }
    &:after {
      content:'';
      display:block;
      position:absolute;
      bottom:-20px;
      left:4px;
      height:30px;
      width:342px;
      background: #ba2500; /* Old browsers */
      background: -moz-linear-gradient(top,  #ba2500 0%, #9b3100 100%); /* FF3.6+ */
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ba2500), color-stop(100%,#9b3100)); /* Chrome,Safari4+ */
      background: -webkit-linear-gradient(top,  #ba2500 0%,#9b3100 100%); /* Chrome10+,Safari5.1+ */
      background: -o-linear-gradient(top,  #ba2500 0%,#9b3100 100%); /* Opera 11.10+ */
      background: -ms-linear-gradient(top,  #ba2500 0%,#9b3100 100%); /* IE10+ */
      background: linear-gradient(to bottom,  #ba2500 0%,#9b3100 100%); /* W3C */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ba2500', endColorstr='#9b3100',GradientType=0 ); /* IE6-9 */
      border-radius:0 0 10px 10px;
      -webkit-transform:perspective( 500px ) rotateX( -40deg );
      box-shadow:inset 0 -2px 3px rgba(0,0,0,.5), 0 3px 2px -1px rgba(0,0,0,1);
      @include transition(.15s ease-in-out);
    }
    &:hover {
      top:-6px;
      &:after {
        height:37px;
        bottom:-26px;
      }
    }
    &:active {
      top:0px;
      &:after {
        height:30px;
        bottom:-20px;
      }
    }
  }
}

// Totally not cleaned up - still playing around too.