DEV Community

Cover image for 10 Simple Toggle Switch Animation Using CSS And JavaScript
Kiran Raj R
Kiran Raj R

Posted on • Updated on

10 Simple Toggle Switch Animation Using CSS And JavaScript

Here I list 10 simple toggle button animation examples. All of them work based on simple transition property. JavaScript is used to toggle class to the elements and mimic the checkbox effect. I am not going to comment how this is created, try to build with your idea, this is simple, I limit the CSS styling to reduce complexities. Its just beginner level code, you can do it without any help. If you are have any doubt, comment it I will help you. I hope you will be able to design better than me. happy Coding




Top comments (6)

Collapse
 
grahamthedev profile image
GrahamTheDev • Edited

I am a fan of any toggles that look like 3,4, 6 and 7. (I like 5 as well but it isn't obvious in the off state what it does, obviously a label would fix that!)

They convey information in multiple ways making them more accessible to a variety of people (number 6 could do with an "X" when "off" / unchecked just for consistency).

I also like the "silly" last one - but if anyone uses that in production I will be very worried 🤣

Collapse
 
kiranrajvjd profile image
Kiran Raj R

Yes, for the sixth one a "X" should make it better and I updated it. Last one was my fav, but will not be using in production :).

Collapse
 
bcat1023 profile image
bcat

Toggle switches are always soo cool

Collapse
 
kiranrajvjd profile image
Kiran Raj R

true

Collapse
 
rick_flores profile image
Rick Flores

These look fun to make. Thanks for your post I think i'll try it out

Collapse
 
kiranrajvjd profile image
Kiran Raj R

Try it, enjoy