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

.a {
    display : inline-block;
    color: #FFFBD5; 
    width: 300px;
    line-height: 66px;
    text-align: center;
    font-size: 28px;
    font-weight: bold;
    text-shadow: 0px 1px #74653D;
    position: relative;
    overflow: hidden;/*はみ出る部分を隠します*/
}
.a::before {
    display: block;
    content: "";
    width: 300px;
    height: 66px;
    background: #B4881B; /*背景色を指定*/
    position: absolute;
    top: 0;
    z-index: -1;
}
.a::after {
    display: block;
    content: "";
    background: repeating-linear-gradient(-45deg,rgba(0,0,0,0) ,rgba(0,0,0,0) 2%, rgba(143,108,21,1) 2%, rgba(143,108,21,1) 4%);/*透過単色ストライプにしています*/
    width: 300px;
    height: 30px;/*お好みで調節してください*/
    position: absolute;
    left: -300px;
    bottom: 0;/*今回は下にくっつけています*/
    z-index: -1;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}
.a:hover::after {
    left: 0px;
}