CSS Smiley Happy to Sad Transition

Created: 11th Sep 24 1 Views
Review needed
Verified
Loading...
Loading...
Comments

In this code example, we create a smiley (you can use an emoji as well) that when clicked turns from happy to sad and vice-versa.





HTML

<div class="smiley happy" onclick="toggleSmiley(this)"></div>


CSS

.smiley {
    width: 100px;
    height: 100px;
    cursor: pointer;
    transition: transform 2.4s ease;
    font-size: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    position: relative;
}

.happy::before {
    content: '\1F600';
}

.sad::before {
    content: '\1F622';
}


JavaScript

function toggleSmiley(element) {
    element.classList.toggle('happy');
    element.classList.toggle('sad');
}

Comments & Discussion

Facing issues? Have questions? Post them here! We're happy to help!

More Posts related to html
More Posts
Random Posts