https://codepen.io/Digitango/pen/YQQBXR

Link hover animation CSS

//  HTML
<link href="https://fonts.googleapis.com/css?family=Play" rel="stylesheet">

<div class="wiggl">  
  <a href="#">Wiggler</a>
</div>

<div class="shake">  
  <a href="#">Shake</a>
</div>  

<div class="pulse">  
  <a href="#">Pulse</a>
</div>

<div class="zoom">  
  <a href="#">Zoom</a>
</div>

// CSS
/***** Wiggle *****/

.wiggl a:hover{ 
  animation: wiggle 75ms infinite;
  animation-timing-function: linear;   
}

@keyframes wiggle {
  0% { transform: translate(2px, 0); }
  50% { transform: translate(-2px, 0); }
  100% { transform: translate(2px, 0); }
}

/***** Shake *****/

.shake a:hover{ 
  animation: shake 75ms infinite;
  animation-timing-function: linear;   
}

@keyframes shake {
  0% { transform: rotate(0.5deg); }
  50% { transform: rotate(-0.5deg); }
  100% { transform: rotate(0.5deg); }
}

/***** Pulse *****/

.pulse a:hover{ 
  animation: pulse 1s infinite;
  animation-timing-function: linear;   
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1);
  100% { transform: scale(1); }
  }
}

/***** Zoom *****/

.zoom a:hover{
  transform: scale(1.1);
  transition: all ease 500ms;
}

/***** Some Misc Styles *****/

body {
  background: #e2e2e2;
  font-family: Play;
}

a{
  width: 300px;
  margin: auto;
  background: #fff;
  padding: 20px;
  overflow: hidden;
  box-shadow: 0 0 25px #000;
  margin-top: 30px;
  border: 1px solid #444;  
  text-align: center;
  display: block;
  color: #444;
  text-decoration: none;
  font-weight: bold;
}