Css Custom Animated Checkbox - How to make CSS switch / toggle / custom checkbox - No Javascript

Enroll My Course : Next Level CSS Animation and Hover Effects
------------------
Join Our Channel Membership And Get Source Code Everyday
------------------
Please LIKE our Facebook page for daily updates...

[Funnycreature]

Tags that don't close (<input> in this case) can't have pseudoelements. Although this might work in modern browsers, this is not a valid way to do it and won't work properly in IE11 for example. You gotta use ::before and ::after of the parent div (or label) instead.

[daylinjones]

THANK YOU!!! for breaking this down step by step. Didn't realize Wordpress was overriding my styling until I saw this video. Very GRATEFUL!!!

[Edthewebsurfer]

Simple and to the point, thank you for uploading.

[DcodeShow]

Wow, you are the man, this is an incredible use of inputs. Thank you for sharing.

[zholy]

Just tried it today and managed to make it work. Line 46 (left:40px) on the "checked::before" didn't work for me with SMOOTH animation/transition = had to use TRANSLATE(100%). When I've left it like you have, for some reason the transition didn't "kick in" and the change of the button position was instant, rather then smooth/animated.

BUT ... still - awesome job on this one. With such "styled checkbox" and SIBLING COMBINATOR I've managed to do a nice option between MONTHLY/YEARLY pricing tables ... <- maybe your next video - toggle between 2 divs with just CSS :) ?

Thanks so much for this step by step tutorial.

[emanueldiazmx]

Wow thank you so much, its so nice and easy to code. Really awesome!

[nicolaszarate]

Thanks a lot. This tutorial was so helpful for a project.

[leonardocamargo]

Melhor vídeo sobre o assunto não pode existir xD. Muito simples de se fazer, as pausas no codigo para mostrar como está ficando são muito boas para o aprendizado. Parabéns pelo trabalho!!!

[The_EpicVoice]

that's fantastic keep going!! if u add ur voice it would be better

[DeshanUdupihilla]

a perfect video. thank you very much! ♥️

[ProMakerDev]

thank you very much, such a great help

[xaxa]

What if I applied a delay to the input to turn blue only when the white circle touched the other end? 🤔

[animartedev]

however if you create more than one button it generates a bug the little ball of the second or third button goes to the place where the first switch is, it only works if it is with only 1 button

[RenardBergson]

Thank you! You're the best css player hehe

[ldawg]

You should add comments to your code so viewers can get an idea of what you're doing. For example, the center class is only for your tutorial and is not needed in a real project. Unless the checkbox needs to be in the center of the screen. Other than that, I get a ton of ideas from you. Keep it up.

[PramitBiswas]

How to add dragging and snapping functionality along with click with js and css only?

[guylemay]

Yeah... this is more like it! It is good enough that it would probably make a JS Guru noticed your Kung Fu?

[gauravdewangan]

Thanks man. Good tutorial but also add comments in code for beginners