<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);/*上にすこし移動させます*/
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.