<a href="#" class="cle-push">
  <span>D</span><span>i</span><span>s</span><span>c</span><span>o</span><span>v</span><span>e</span
  ><span>r</span>
</a>

.cle-push {
  display: inline-flex;
  color: #c4b5fd;
  font:
    700 18px/1.2 system-ui,
    sans-serif;
  text-decoration: none;
  letter-spacing: 0.02em;
  border-bottom: 1.5px solid rgba(124, 108, 255, 0.4);
  padding-bottom: 3px;
  transition: border-color 0.25s;
}
.cle-push:hover {
  border-bottom-color: #7c6cff;
}
.cle-push span {
  display: inline-block;
  transition:
    transform 0.35s cubic-bezier(0.65, 0, 0.35, 1),
    color 0.25s;
}
.cle-push:hover span {
  color: #fff;
  transform: translateY(-3px);
}
.cle-push:hover span:nth-child(1) {
  transition-delay: 0s;
}
.cle-push:hover span:nth-child(2) {
  transition-delay: 0.04s;
}
.cle-push:hover span:nth-child(3) {
  transition-delay: 0.08s;
}
.cle-push:hover span:nth-child(4) {
  transition-delay: 0.12s;
}
.cle-push:hover span:nth-child(5) {
  transition-delay: 0.16s;
}
.cle-push:hover span:nth-child(6) {
  transition-delay: 0.2s;
}
.cle-push:hover span:nth-child(7) {
  transition-delay: 0.24s;
}
.cle-push:hover span:nth-child(8) {
  transition-delay: 0.28s;
}