<style>
[href="#hello"] span {
display: inline-block;
transition: 0.25s cubic-bezier(0.5, -1, 0.5, 2);
opacity: 0;
transform: translate(0, -20px);
}
[href="#hello"] .t142__submit:before {
content: attr(data-text);
position: absolute;
width: 100%;
left: 0;
transition: 0.25s cubic-bezier(0.5, -1, 0.5, 2);
opacity:1;
transform: translate(0, 0px);
}
[href="#hello"] .t142__submit:hover:before, [href="#hello"] .t142__submit:focus:before {opacity: 0;transform: translate(0, 20px)}
[href="#hello"]:hover span, [href="#hello"]:focus span {opacity: 1;transform: translate(0, 0)}
[href="#hello"]:hover span:nth-child(1), [href="#hello"]:focus span:nth-child(1) {transition-delay: 0.025s}
[href="#hello"]:hover span:nth-child(2), [href="#hello"]:focus span:nth-child(2) {transition-delay: 0.05s}
[href="#hello"]:hover span:nth-child(3), [href="#hello"]:focus span:nth-child(3) {transition-delay: 0.075s}
[href="#hello"]:hover span:nth-child(4), [href="#hello"]:focus span:nth-child(4) {transition-delay: 0.1s}
[href="#hello"]:hover span:nth-child(5), [href="#hello"]:focus span:nth-child(5) {transition-delay: 0.125s}
[href="#hello"]:hover span:nth-child(6), [href="#hello"]:focus span:nth-child(6) {transition-delay: 0.15s}
[href="#hello"]:hover span:nth-child(7), [href="#hello"]:focus span:nth-child(7) {transition-delay: 0.175s}
</style>
<script>
$('[href="#hello"] .t142__submit').append('<span>c</span><span>п</span><span>a</span><span>с</span><span>и</span><span>б</span><span>о</span>').attr('data-text', $('[href="#hello"] .t142__text').text()).css('width', $('[href="#hello"] .t142__submit').width())
$('[href="#hello"] .t142__text').remove()
</script>