<style>

.button .tn-atom {
    --duration: .7s;
    --move-hover: -8px;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    transition: background-color 0.3s ease-in
}


.button .tn-atom div {
    display: flex;
    justify-content: center
}

.button .tn-atom div span {
    display: block;
    min-width: 5px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    font-style: normal
}

.button .tn-atom:hover {
    --y: var(--move-hover);
    --shadow: var(--shadow-hover);
    --move: -7px
}

.button .tn-atom:hover span {
    -webkit-animation: move var(--duration) linear var(--d) infinite;
    animation: move var(--duration) linear var(--d) infinite
}

@-webkit-keyframes move {
    40% {
        transform: translateY(var(--move))
    }
}

@keyframes move {
    40% {
        transform: translateY(var(--move))
    }
}

.t-col-flex {
    display: flex
}
</style>

<script>
window.onload = function() {
        let button = document.querySelectorAll('.button .tn-atom');
        button.forEach(button => button.innerHTML = '<div><span>' + button.textContent.trim().split('').join('</span><span>') + '</span></div>');
    
        let delay = 0.03;
        
        button.forEach((el) => {
            let symbolLength = el.querySelectorAll('.button .tn-atom div span').length;
            for (let i = 1; i <= symbolLength; i += 1) {
                let buttonSymbol = `div span:nth-of-type(${i})`;
                let span = el.querySelector(buttonSymbol);
                span.style.setProperty("--d", delay + "s");
                delay += 0.03;
            }
            delay = 0.03;
        })
}
</script>