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

.container {
	background: url(http://hsmtweb.com/image/woods.jpg);
  width: 380px;
  position: relative;
}

li {
    display : inline-block;
    color: #FFF; 
    width: 300px;
    line-height: 66px;
    text-align: center;
    font-size: 28px;
    font-weight: bold;
    border: 1px #FFF solid;
    margin: 20px 0 ;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}
.a:hover {
    color: #BF9427;
    border: 1px #BF9427 solid;
}

/* 背景をすこし暗くするバージョン */
.b:hover {
    background: rgba(0,0,0,.5);
    color: #BF9427;
    border: 1px #BF9427 solid;
}