<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;
}

li {
    display : inline-block;
    background: rgba(255,255,255,); 
    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 {
    box-shadow: 0px 0px 10px 2px #fff;/*ボタンの外側に*/
    text-shadow: 0px 0px 10px #fff;/*文字の周りに*/
}
.b:hover {
    box-shadow: 0px 0px 10px 2px #F9DB57;/*色をつけてもきれいです*/
    text-shadow: 0px 0px 10px #F9DB57;
}