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

No video

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

Рет қаралды 134,664

Күн бұрын

Enroll My Course : Next Level CSS Animation and Hover Effects
www.udemy.com/...
------------------
Join Our Channel Membership And Get Source Code Everyday
Join : / @onlinetutorialsyt
------------------
Please LIKE our Facebook page for daily updates...
/ online-tutorial-html-c...

Пікірлер: 110

@Funnycreature17 4 жыл бұрын

Tags that don't close ( 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.

@reallygood7580 4 жыл бұрын

this should get more likes, because its true

@MrHouloul 2 жыл бұрын

can you write it I dont understand

@Funnycreature17 2 жыл бұрын

@@MrHouloul Ok I'll try. The markup in this tutorial is ... ... what I suggest doing instead is: ... ... Then you can hide actual input like this: .hidden-input-part:not(:focus):not(:active) { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; border: 0; clip: rect(0 0 0 0); } and change selectors from this video like this: input[type="checkbox"] ---> .hidden-input-part + .visible-input-part input:checked [type="checkbox"]---> .hidden-input-part:checked + .visible-input-part input[type="checkbox"]::before ---> .hidden-input-part + .visible-input-part::before input:checked[type="checkbox"]::before ---> .hidden-input-part:checked + .visible-input-part::before There are like 5 more way to do this correctly that I know about, this one is just my go-to method.

@daylinjones7194 4 жыл бұрын

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

@zholy9 6 жыл бұрын

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

@reallygood7580 4 жыл бұрын

Win + Tab. Nice...

@Edthewebsurfer 5 жыл бұрын

Simple and to the point, thank you for uploading.

@DcodeShow 4 жыл бұрын

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

@nicolaszarate2439 3 жыл бұрын

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

@Coding_Tricks771 6 ай бұрын

Thank you very much this help me lot

@leonardocamargo5412 4 жыл бұрын

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

@animartedev 2 жыл бұрын

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

@gyros9162 Жыл бұрын

this is cool and beautiful

@RenardBergson Жыл бұрын

Thank you! You're the best css player hehe

@ldawg214 7 жыл бұрын

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.

@ivanpoberezhniuk9694 5 жыл бұрын

btw, it's obvious

@iliasselaissi3890 2 жыл бұрын

this is the easy way to do it

@revanth9272 4 жыл бұрын

I learnt a lot from you👍.

@ismotarasrity4696 4 жыл бұрын

Thanks

@sujandrn6186 4 жыл бұрын

i really love it......

@OnlineTutorialsYT 4 жыл бұрын

Great

@eypbal 7 жыл бұрын

This is so perfect. Thanksssss

@emre-vt6zi 2 жыл бұрын

thank you..

@NinjaCoders 3 жыл бұрын

thank you bhai

@gauravdewangan1460 2 жыл бұрын

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

@Ibrahimkhalil-hw4hd 2 жыл бұрын

Thank you bro. You are amazing

@vincenzocristiano135 2 жыл бұрын

thanks legend!

@edoBianchi 2 жыл бұрын

good.thx

@Jamesis07 3 жыл бұрын

Thank you very much you are perfect

@princeyadav4294 2 жыл бұрын

great

@kikiriki2024 3 жыл бұрын

Gracias

@AdairAconzs 3 жыл бұрын

Nice

@grinders2000 2 жыл бұрын

THANK U

@xaxa730 5 жыл бұрын

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

@vijaygohil4685 6 жыл бұрын

You have created the videos is very best or superb but I request that enter voice in your video and explain case property SVG

@OnlineTutorialsYT 6 жыл бұрын

+Vijay Gohil ok

@rainchai851 4 жыл бұрын

i prefer this song

@emanueldiazmx 6 жыл бұрын

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

@user-sh4jl3hz2w 2 жыл бұрын

i wanna steal your skills

@amine_ers 4 жыл бұрын

Thaaanks

@DeshanUdupihilla 3 жыл бұрын

a perfect video. thank you very much! ♥️

@CoderDmitri 3 жыл бұрын

@The_EpicVoice 6 жыл бұрын

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

@justb3m184 3 жыл бұрын

Salute!

@aliabukahil 3 жыл бұрын

Absolutely appreciated

@martinflores9611 5 жыл бұрын

your video It helped me a lot

@nomanabid9394 4 жыл бұрын

You're the BEST

@alonsogza2890 6 жыл бұрын

Muchas Gracias, Excelente ejemplo

@tonnichowdhury7356 4 жыл бұрын

thanksssss aaa trillion

@Peter_Gamerrr 4 жыл бұрын

you should use :: for pseudo elements instead of using : because that's for pseudo classes pls I know just a single one works to make sure its backwards compatible but it's not the default for css3

@deepaksarvepalli2344 3 жыл бұрын

I couldn't able to change width and Height with differente pixels.... Means it took only same value for the dimensions... Like square.... Please help me to fix this...

@Error-zs1yn 3 жыл бұрын

thank you so much

@cypherk 4 жыл бұрын

Doesn't quite work for me. the `::before` elements slides, alright, but there's also a circle left behind where it used to be in the unchecked state but half-hidden behind the checkbox background.

@reallygood7580 4 жыл бұрын

im not sure that it will work, but try "z-index: 1;"

@emcasaempreendimentosimobi3229 3 жыл бұрын

Perfect . Thank you

@ProMakerDev 4 жыл бұрын

thank you very much, such a great help

@christianromero6815 Жыл бұрын

How to do this with input{ all: unset;} in reset stylesheet???

@satyabratasahoo8665 4 жыл бұрын

Very nice 👌

@bobsuk777 7 жыл бұрын

God stuff, but, in input[type='checkbox'] css declaration, must be added -moz-apearance:none; for firefox compatibility

@ewenlbh 6 жыл бұрын

Bob Suk yeah and a display:none on the checkbox element would be way better

@reallygood7580 4 жыл бұрын

@@ewenlbh TRUE

@miriaandressa2734 3 жыл бұрын

Nice, thanks

@micromanBD 6 жыл бұрын

So many thanks for sharing it.

@jaspreethayer2275 5 жыл бұрын

Amazing

@luiza4142 7 жыл бұрын

You save me again thx bro

@AruljothySundramoorthy 4 жыл бұрын

Awesome Man

@guylemay1471 5 жыл бұрын

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

@PramitBiswas 6 жыл бұрын

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

@wilsommontec390 5 жыл бұрын

Me sirvio su video gracias

@edwingarcia5043 5 жыл бұрын

Awesome bro

@syediqbalahmed3176 5 жыл бұрын

*_good_*

@alexkotusenko302 6 жыл бұрын

NICE!!!!!!!!!!!!!!!!!!!!!! LIKE!!!!!!!!!!!!!!!!!!!!!!

@krmnPareDes 3 жыл бұрын

@hvxun9924 3 жыл бұрын

amazinggggggggggg

@tsnode4098 5 жыл бұрын

thaks for this

@carlosgaleanohn 7 жыл бұрын

Great job!!!

@akshaybedared 4 жыл бұрын

Thank you :)

@maazsiddiqui6324 4 жыл бұрын

my button which is scaled gets small when its checked and when cheked it scales(1.1)! solution?

@end-me-please 2 жыл бұрын

what is the background music?

@ck0024 5 жыл бұрын

*Cool*

@виртуоз_ру 7 жыл бұрын

Красавчик

@user-bl2ij3be4c 4 жыл бұрын

Thanks. By the way, I like classical music, but that was tooooooooooooooo schmaltzy.

@michelventura3882 4 жыл бұрын

thaaaaanks !

@venturevpn 6 жыл бұрын

Send us , movie , you create app APK responsive scroll menu . Congratulations to you big developer congratulations to you

@SSCAT0 4 жыл бұрын

i don't know how make circle in center. in Microsoft Edge not work (

@s.agamerz7962 3 жыл бұрын

Make a game using python or java

@douglaslisboa9 5 жыл бұрын

Muito bom, parabéns \o/

@mikebags6653 6 жыл бұрын

it doesn't work in other browsers. it only works in chrome. can you help me?

@ChrisAdams-fc2mn 6 жыл бұрын

If I put this code in my CSS will it not affect every checkbox on my website?

@julioalvarado1833 3 жыл бұрын

@Seyfettin0 5 жыл бұрын

Hey please add the codes on descriptions .

@luiza4142 7 жыл бұрын

How to style a radio button??

@mdshabaz2591 4 жыл бұрын

instead of music u can explain the code too

@NadeemJohn-xu4lu 9 ай бұрын

NADEEMJOHN

@taranagnew436 4 жыл бұрын

i've tried everything and i just get a square check-box and not wat you have, plz help

@eccehomer8182 4 жыл бұрын

Make sure your code is absolutely the same - every character, every space. If it doesn't work then post your code here in a reply.

@taranagnew436 4 жыл бұрын

HTML: Style Checkbox with CSS CSS: body{ margin: 0; padding: 0; background: #f3f3f3;} .center{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);} } input[type="checkbox"] { position: relative; width: 80px; height: 40px; -webkit-appearance: none; background: #c6c6c6; outline: none; border-radius: 20px; box-shadow: inset 0 0 5px rgba(255, 0, 0, 0.2); /*transition: .5s;*/ } input:checked[type="checkbox"] { background: #03a9f4; } input[type="checkbox"]:before { content: ''; position: absolute; width: 40px; height: 40px; border-radius: 20px; top: 0; left: 0; background: #0400ff; transform: scale(1.1); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); transition: .5s; } input:checked[type="checkbox"]:before { left:40px; }

@deepakgurung309 6 жыл бұрын

input[type="checkbox'] is not working for firefox

@CyanLuk 5 жыл бұрын

no me funciona lo copie tal cual lo vi en us video y no me hace las transiciones correctamente. no tube ningun error al copiarlo. que esta pasando?

@controlccontrolv4519 5 жыл бұрын

Hey I'II can to replay your code in my language on my channel?

@link2web658 5 жыл бұрын

dear sir Mujhe apni youtube play list ko apne php/html page per list karna or wo play kar per popup ho automatically update ho uvaaworld.com/gallery_backup.php ye website ka link hai kuch is traha se plz code ya video ka link send kijiye