<ul>
<li class="a">Put on!</li>
</ul>
li {
display : inline-block;
background: #74653D;
color: #FFFBD5;
width: 300px;
line-height: 66px;
margin-top: 50px;/*上に余白を作っておきます*/
border-radius: 10px;
text-align: center;
font-size: 28px;
font-weight: bold;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.a:hover {
margin-top: 20px;
-mos-transform: translateY(-30px);
-webkit-transform: translateY(-30px);
tramsform: translateY(-30px);/*上にすこし移動させます*/
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.