<p style="width: 100%; float: left; min-height: 4rem">
    <span class="transition-emoji transition">⚡️ <span>With Transition</span></span>
    <span class="transition-emoji no-transition">⚡️ <span>Without Transition</span></span>
</p>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:[email protected];300;400;500;700&display=swap" rel="stylesheet">

body {
  color: rgba(255,255,255,0.5);
  background: rgb(15 19 22);
  font-family: Inter, sans-serif;
}
    .transition-emoji {
        display: inline-block;
        background: #654bc9;
        width: 4rem;
        height: 4rem;
        margin: 0 1rem 5rem;
        cursor: pointer;
        padding: 0.75rem 0 0 0;
        position: relative;
        font-size: 2rem;
        text-align: center;
        box-sizing: border-box;
        top: 0;
        border-radius: 100px;
    }

    .transition-emoji.transition {
        transition: all 0.2s ease-out;
    }
    .transition-emoji.active {
        top: 2rem;
    }

    .transition-emoji span {
        position: absolute;
        bottom: -3rem;
      letter-spacing: 0.5px;
        font-size: 0.875rem;
        line-height: 1.25rem;
        left: 0;
    }

    document.querySelectorAll('.transition-emoji').forEach(function(item) {
        item.addEventListener('click', function(e) {
            if(this.classList.contains('active')) {
                this.classList.remove('active');
            }
            else {
                this.classList.add('active');
            }
        });
    });