<ul>
  <li class="a">Put on!</li>
</ul>

.a {
    display : inline-block;
    background-image: -webkit-linear-gradient(
      #936A00 0, #BF9427 95%, #936A00 100%
    );
    background-image: linear-gradient(
      #936A00 0, #BF9427 95%, #936A00 100%
    );
    color: #FFFBD5; 
    width: 300px;
    line-height: 66px;
    text-align: center;
    font-size: 28px;
    border-radius: 10px;
    box-shadow: 0 -2px 0 #BF9427;
    font-weight: bold;
    position: relative;
    overflow: hidden;/*ボタンからはみ出る部分を隠します*/
}
.a:before {
    content: "";
    background-image: -webkit-linear-gradient(
      130deg,
      rgba(255,255,255,0) 20%, 
      rgba(255,255,255,0.5) 50%, /*透明度を調整して光沢を作ります*/
      rgba(255,255,255,0) 80%
    );
    background-image: linear-gradient(
      130deg,
      rgba(255,255,255,0) 20%,
      rgba(255,255,255,0.5) 50%,
      rgba(255,255,255,0) 80%
    );
    width: 200%;
    height: 200%;
    position: absolute; /*ボタンの左上方向にはみ出させて配置*/
    top: -100%; 
    left: -200%;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}
.a:hover:before {
  top: 0%; /*ボタンの右下方向へ移動させます*/
  left: 100%;
}