Button Text Animation

In this article, we'd love to share a button text hover effect with you guys.

To create the effect. Follow these steps:

HTML Markup

<button class="btn fade" data-content="Yes!"><p>Hover me!</p></button>
<button class="btn top" data-content="Yes!"><p>Hover me!</p></button>
<button class="btn bottom" data-content="Yes!"><p>Hover me!</p></button>
<button class="btn left" data-content="Yes!"><p>Hover me!</p></button>
<button class="btn right" data-content="Yes!"><p>Hover me!</p></button>
<button class="btn zoomIn" data-content="Yes!"><p>Hover me!</p></button>
<button class="btn zoomOut" data-content="Yes!"><p>Hover me!</p></button>

CSS

.btn {
  background: #4285F4;
  padding: 5px;
  min-width: 200px;
  border: none;
  border-radius: 3px;
  color: #FFF;
  font-weight: bolder;
  font-size: 16px;
  position: relative;
  overflow: hidden;
  transition: .25s;
  cursor: pointer;
}
.btn:after {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  content: attr(data-content);
  opacity: 0;
  visibility: hidden;
  transition: .25s;
}
.btn p{
  transition: .15s;
  opacity: 1;
}
.btn:hover p {
  opacity: 0;
}
.btn:hover:after {
  opacity: 1;
  visibility: visible;
}
.btn.top:after {
  top: 100%;
}
.btn.top:hover:after {
  top: 0;
}
.btn.top:hover p {
  opacity: 0;
  transform: translateY(-40px);
}

.btn.bottom:after {
  top: -100%;
}
.btn.bottom:hover:after {
  top: 0;
}
.btn.bottom:hover p {
  transform: translateY(40px);
}

.btn.left:after {
  left: -100%;
}
.btn.left:hover:after {
  left: 0;
}
.btn.left:hover p {
  transform: translateX(100px);
}

.btn.right:after {
  left: 100%;
}
.btn.right:hover:after {
  left: 0;
}
.btn.right:hover p {
  transform: translateX(-100px);
}

.btn.zoomIn:after {
  transform: scale(1.5);
}

.btn.zoomOut:after {
  transform: scale(0.5);
}
.btn.zoomIn:hover:after, .btn.zoomOut:hover:after {
  transform: scale(1);
}

.btn.fade p {
  transition: 1s;
}
.btn.fade:after {
  transition: 1s;
  opacity: 0;
}

.btn.fade:hover:after {
  opacity: 1;
}