<div class="wrap">
  <a href="#" class="button"></a>
</div>
body{
  padding:0;
  margin:0;
  background: #efebe4;
}

.wrap{
  width: 216px;
  height: 68px;
  background: #fff;
  margin: 50px auto;
  border-radius: 34px;
  box-shadow:
    inset 0 30px 50px #d1d1d1;
  position: relative;
}
  
.wrap:before{
  content:"";
  width: 206px;
  height:58px;
  border-radius: 29px;
  background: #e9d7be;
   box-shadow:
    inset 0 30px 50px #a5a4a4;
  position: absolute;
  left: 5px;
  top: 5px;
}

.wrap:after{
  content:"";
  width: 200px;
  height:52px;
  border-radius: 26px;
  background: -webkit-linear-gradient(top, #fe9810 0%,#e75400 61%,#e75400 91%,#ea8810 100%);
  box-shadow:
    inset 0 3px 20px rgba(0, 0, 0, 0.8);
  position: absolute;
  left: 8px;
  top: 8px;
  transition: all 1s ease-in-out;
}

.button{
  display: inline-block;
  width: 115px;
  height: 52px;
  border-radius: 30px;
  background: -webkit-linear-gradient(top, #efeeee 0%,#bcb9b8 100%);
  border-top: solid 2px #fafafa;
  border-bottom: solid 2px #ada39d;
  box-shadow:
    1px 6px 7px rgba(0, 0, 0, 0.5),
    0 0 5px rgba(0, 0, 0, 0.4);
  position: relative;
  top: 5px;
  left: 6px;
  z-index: 99;
}

.button:before{
  content: "";
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: -webkit-linear-gradient(top, #c2c0be 0%,#d6d6d6 100%);
  position: absolute;
  top: 8px;
  right: 10px;
}

.button:hover{
  border-bottom: none;
  top: 6px;
  box-shadow:
    1px 4px 7px rgba(0, 0, 0, 0.5),
    0 0 3px rgba(0, 0, 0, 0.4);
}

.button:active{
  left: 94px;
  transition: all 0.2s ease-in-out;
}
/*************************************************************
 * twitter @JackFilose
 * inspired by http://dribbble.com/shots/580766-expswitch

*************************************************************/

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.