<a class="btn" href="#">Paused. Наведи курсор</a>
<a class="btn2" href="#">Running. Наведи курсор</a>
.btn, .btn2 {
  width:180px;
  background: darkblue;
  padding:2%;
  position:relative;
  top:20px;
  color:#fff;
  text-decoration:none;
  animation:move 0.5s ease-in-out infinite alternate;
}
.btn2 {
  animation:move 0.5s ease-in-out infinite alternate paused;
}
.btn:hover {
  animation-play-state: paused;
  -webkit-animation-play-state: paused;
}
.btn2:hover {
  animation-play-state: running;
  -webkit-animation-play-state: running;
}
@keyframes move {
  0% {
    top:20px;
  }
  50% {
    top:15px;
  }
  100% {
    top:25px;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.