CSS 3D rectangular button

by dipish

HTML

<div id="wrapper">
    <button class="myBtn">
        I am a button
        <p class="corner br"></p>
        <p class="corner bl"></p>
        <p class="shadow b"></p>
    </button>
</div>

CSS

body {
  background: #eee;
}

#wrapper {
  padding: 50px;
}

.myBtn {
  position: relative;
  display: inline-block;
  background-color: #97c3ed;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #bcdeff), color-stop(100%, #8cb5db));
  background-image: -webkit-linear-gradient(top, #bcdeff, #8cb5db);
  background-image: -moz-linear-gradient(top, #bcdeff, #8cb5db);
  background-image: -o-linear-gradient(top, #bcdeff, #8cb5db);
  background-image: -ms-linear-gradient(top, #bcdeff, #8cb5db);
  background-image: linear-gradient(top, #bcdeff, #8cb5db);
  border: solid 1px #415466;
  padding: 5px 10px;
  font-size: 14px;
  font-weight: bold;
  color: #752a26;
  text-shadow: 1px 1px 0 #e5f2ff;
  /*-moz-box-shadow: 0px 4px 0px 0px #627e99;
  -webkit-box-shadow: 0px 4px 0px 0px #627e99;
  -o-box-shadow: 0px 4px 0px 0px #627e99;
  box-shadow: 0px 4px 0px 0px #627e99;*/
}
.myBtn:active, .myBtn-split:active {
  top: 4px;
  box-shadow: none;
}

.shadow.b {
    position: absolute;
    height: 4px;
    bottom: -5px;
    left: 3px;
    right: 0;
    background: #627e99;
    overflow: hidden;
}
.corner {
    border-style:solid;
    border-width:4px;
    height:0px;
    width:0px;
    position: absolute;
    bottom: -9px;
}

.corner.bl {
    border-color: #627e99 transparent transparent transparent;
    left: -2px;
}

.corner.br {
    border-color: transparent transparent #627e99 transparent;
    right: -4px;
    bottom: -5px;
}