Роллинг-ссылка

<a class="roll" href="#" data-text="ССЫЛКА"></a>

<style>
.roll { display: inline-flex; overflow: hidden;
  font-size: 64px; line-height: 1.1; text-decoration: none; }
.roll i { position: relative; display: inline-block;
  font-style: normal; height: 1.1em; }
.roll i b { display: block; height: 1.1em;
  transition: transform .45s cubic-bezier(.16,1,.3,1);
  transition-delay: calc(var(--i) * 24ms); }   /* каскад */
.roll i b:last-child { position: absolute; top: 1.1em; left: 0;
  color: #E84B16; }                            /* нижний этаж — акцент */
.roll:hover i b { transform: translateY(-1.1em); }
</style>

<script>
document.querySelectorAll(".roll").forEach(function (el) {
  Array.prototype.forEach.call(el.getAttribute("data-text"), function (ch, idx) {
    var i = document.createElement("i");
    i.style.setProperty("--i", idx);
    i.innerHTML = "<b>" + ch + "</b><b>" + ch + "</b>";
    if (ch === " ") i.style.width = ".3em";
    el.appendChild(i);
  });
});
</script>

Сделай роллинг-ссылку (двухэтажные буквы): JS строит для каждой буквы контейнер overflow:hidden высотой 1.1em с двумя копиями буквы одна под другой (вторая absolute на top:1.1em, акцентного цвета). По ховеру обе едут translateY(-1.1em) за 0.45s по cubic-bezier(0.16,1,0.3,1) с каскадом transition-delay i*24ms — буквы перекатываются волной, открывая цветной дубль. Классика студийных меню.