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

li{
    display : inline-block;
    background-image: -webkit-linear-gradient(#936A00 0, #BF9427 5%, #936A00 100%);
    background-image: linear-gradient(#936A00 0, #E2AB22 5%, #936A00 100%);
    color: rgba(255, 251, 213, 1); 
    width: 300px;
    line-height: 66px;
    text-align: center;
    font-size: 28px;
    border-radius: 10px;
    box-shadow: 0 2px 0 #BF9427;
    font-weight: bold;
}
.a:active {
    background-image: -webkit-linear-gradient(#936A00 0, #BF9427 95%, #936A00 100%);
    background-image: linear-gradient(#805F0D 0, #BF9427 95%, #805F0D 100%);
    box-shadow: 0 -2px 0 #BF9427;
    color: rgba(255, 251, 213, 0.7); /*透明度を調節して文字も暗く見せています*/
}