<p><a data-btn="Contact Us" class="btn" href="#">Contact Us</a></p>

.btn,
.btn:after {
  display: inline-block;
  color: #fff;
  text-decoration: none;
  background: blue;
  line-height: 2.75rem;
  padding: 0 2rem;
  text-transform: uppercase;
  letter-spacing: 0.05rem;
  font-size: 0.75rem;
  position: relative;
  overflow: hidden;
}

.btn:after {
  content: attr(data-btn);
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  top: 0;
  background: green;
  transform: translateY(-100%);
  opacity: 0;
  animation: slideOut 1s forwards;
}

.btn:hover:after {
  animation: slideUp 1s forwards;
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0%);
    opacity: 1;
  }
}

@keyframes slideOut {
  from {
    transform: translateY(0%);
  }
  to {
    transform: translateY(-100%);
    opacity: 1;
  }
}