<div>
   <h1>Button Hover Animations</h1>
   <button class= "one">bounce.</button>
   <button class= "two">wiggle.</button>
   <button class= "three">stretch.</button>
   <button class= "four">tilt.</button>
   <button class= "five">slant.</button>
</div>

@import url(https://fonts.googleapis.com/css?family=Ubuntu);
html{ 
  font-family: 'Ubuntu'; 
}
body{ 
  text-align: center; 
  background: no-repeat center center fixed; 
  background-image: linear-gradient(22deg, #FF0D8B, #7805E8); 
  -webkit-background-size: cover; 
  -moz-background-size: cover; 
  -o-background-size: cover; 
}
h1{ 
  color: white; 
  font-size: 25px; 
  margin: 50px; 
}
button{ 
  color: black; 
  height: 80px; 
  width: 200px; 
  border: none; 
  border-radius: 10px; 
  font-size: 35px; 
  padding: 10px; 
  margin: 20px; 
  background: #FFFFFF; 
  transition-property: background; 
  transition-duration: 0.4s; 
  transition-timing-function: linear; 
}
button:hover{ 
  background: #431AE8; 
}
.one:hover{ 
  animation-name: bounce; 
  animation-duration: 0.4s; 
  animation-timing-function: ease-in-out; 
  animation-delay: 0s; 
  animation-direction: alternate; 
  animation-iteration-count: 3s; 
  animation-fill-mode: forwards; 
  animation-play-state: running; 
}
@keyframes bounce{ 
  0%, 100% { transform: scale(1); } 25%, 75% { transform: scale(0.9); } 50% { transform: scale(1.1); } 
}
.two:hover{ 
  animation-name: wiggle; 
  animation-duration: 0.4s; 
  animation-timing-function: ease-in-out; 
  animation-delay: 0s; 
  animation-direction: alternate; 
  animation-iteration-count: 3s; 
  animation-fill-mode: forwards; 
  animation-play-state: running; }
@keyframes wiggle{ 0%, 100% { transform: translate(0,0); } 25%, 75% { transform: translate(10px,0); } 50% { transform: translate(-10px,0); } 
}
.three:hover{ 
  animation-name: stretch; 
  animation-duration: 0.4s; 
  animation-timing-function: ease-in-out; 
  animation-delay: 0s; 
  animation-direction: alternate; 
  animation-iteration-count: 3s; 
  animation-fill-mode: forwards; 
  animation-play-state: running; 
}
@keyframes stretch{ 
  0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(1.3); } 
}
.four:hover{ 
  animation-name: tilt; 
  animation-duration: .4s; 
  animation-timing-function: ease-in-out; 
  animation-delay: 0s; 
  animation-direction: alternate; 
  animation-iteration-count: 3s; 
  animation-fill-mode: forwards; 
  animation-play-state: running; 
}
@keyframes tilt{ 
  0%, 100% { } 50% { transform: rotate(15deg); } 
}
.five:hover{ 
  animation-name: slant; 
  animation-duration: .4s; 
  animation-timing-function: ease-in-out; 
  animation-delay: 0s; 
  animation-direction: alternate; 
  animation-iteration-count: 3s; 
  animation-fill-mode: forwards; 
  animation-play-state: running; 
}
@keyframes slant{ 
  0%, 100% { } 50% { transform: skew(-50deg, 5deg); } 
}