Михаил

Если бы не нужно было анимировать каждый символ отдельно - можно было бы попробовать сделать через ::before и ::after, куда в правило content запихиваешь содержимое кнопки. ::before позиционируем таким образом, чтобы мы его видели в центре кнопки, а ::after за его пределами. При наведении на кнопку ::before уводишь наверх, а ::after выводишь на середину кнопки.

Если же нужно обязательно анимировать посимвольно - проделываешь тот же самый алгоритм, но уже без ::before и ::after, а делая на вложенных элементах, типа такого:

<button class="button">
  <div class="button-primary-text">
    <span class="button-symbol">D</span>
    <span class="button-symbol">O</span>
    <span class="button-symbol">N</span>
    <span class="button-symbol">A</span>
    <span class="button-symbol">T</span>
    <span class="button-symbol">E</span>
  </div>
  <div class="button-secondary-text">
    <span class="button-symbol">D</span>
    <span class="button-symbol">O</span>
    <span class="button-symbol">N</span>
    <span class="button-symbol">A</span>
    <span class="button-symbol">T</span>
    <span class="button-symbol">E</span>
  </div>
</button>

По идее стили будут несложные, через :nth-child задать некоторые задержки для символов внутри кнопки, а сам текст двигать с помощью transform: translate(...)

Возможно можно как-то и без "дублирования" кода, поигравшись как-то с transition, но, например, когда я смотрел всякие дизайнерские сайты на awwwards, то подобная анимация была сделала именно через дублирование