<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:wght@100;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');
}
});
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.