DEV Community

loading...
Cover image for 10 Simple Toggle Switch Animation Using CSS And JavaScript

10 Simple Toggle Switch Animation Using CSS And JavaScript

kiranrajvjd profile image Kiran Raj R Updated on ・1 min read

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




Discussion (6)

Collapse
inhuofficial profile image
InHuOfficial • 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 Author

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
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 Author

Try it, enjoy

Forem Open with the Forem app