<ul>
  <li class="a">Click here!</li>
</ul>

li {
    display : inline-block;
    background: #BF9427; 
    box-shadow: 0px 8px 0px 0px #74653D;/*ぼかし無しゼロ距離シャドウで飛び出している感じを出します*/
    color: #FFFBD5; 
    width: 300px;
    line-height: 66px;
    text-align: center;
    font-size: 28px;
    font-weight: bold;
    border-radius: 20px;/*角は丸めたほうが自然になります*/
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
.a:active {
    box-shadow: 0px 2px 0px 0px #74653D;/*シャドウを縮めます*/
    -webkit-transform: translateY(6px);/*本体を下にずらします*/
    transform: translateY(6px);
}