<ul>
  <li class="a">Put on!</il>
</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-keyframes comeback {
    20% {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: translateY(5px) scale(1.1);
        transform: translateY(5px) scale(1.1);
        opacity: 1;
    }
    60% { 
        -webkit-transform: translateY(-30px) scale(0.6);
        transform: translateY(-30px) scale(0.6); 
        opacity: 0.5;
    }
    100% {
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}
@keyframes comeback {
    20% {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: translateY(5px) scale(1.1);
        transform: translateY(5px) scale(1.1);
        opacity: 1;
    }
    60% { 
        -webkit-transform: translateY(-30px) scale(0.6);
        transform: translateY(-30px) scale(0.6); 
        opacity: 0.5;
    }
    100% {
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}
.a:hover { 
    -webkit-animation: comeback 1.5s infinite ease-in-out;
    animation: comeback 1.5s infinite ease-in-out;
}