.button {
  background-color: rgb(22, 127, 251);
  border: none;
  color: white;
  padding: 15px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;  
  border-radius: 6px;
  transition: transform .2s;
}
.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}
.button:hover span {
  padding-right: 25px;
}
.button:hover span:after {
  opacity: 1;
  right: 0;
}
.button:hover {
  background-color: rgb(22, 127, 251);
}

.send-animation {
  animation: sendCard .6s linear .1s 1 normal;     /* Animation Shorthand: name duration timingFunction delay iterations direction (order does not matter as long as duration becomes before delay)*/
  animation-fill-mode: forwards;     /* keeps card off screen untill class is removed */
}

.verification-message-animation {
  animation: verificationMessageAnimation 1.7s linear 1.2s 1 normal;
  animation-fill-mode: forwards;  
}

@keyframes sendCard {
  0%   {transform: translate3d(0px, 0px, 0px); animation-timing-function: ease;}
  45%  {transform: translate3d(-200px, 0px, 0px) scaleX(.95) scaleY(1.05); animation-timing-function: ease;}
  100% {transform: translate3d(3000px, 0px, 0px) scaleX(1.9) scaleY(.1); animation-timing-function: linear;}
}

@keyframes verificationMessageAnimation {
  0% {opacity: 0}
  5% {opacity: 1}
  85% {opacity: 1}
  100% {opacity: 0}
}