<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 {
background: rgba(255,255,255,0.3) ;
/*背景の透明度が変わる*/
}
.b:hover {
background: rgba(158,179,189,0.5) ;
/*色がついていてもきれいです*/
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.