Pure Css Custom Checkbox Design - Css Glowing Checkbox Button Effects - Tutorial 

Yes

Yea!

thanks

@@OnlineTutorialsYT share the code please , I m not able to get same output dont know where the problem is being encountered

@@OnlineTutorialsYT Please send me the code I am been confused

@@tushargoyaliit body { margin: 0; padding: 0; background: #292929; } .center { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } input[type="checkbox"] { position: relative; width: 120px; height: 40px; -webkit-appearance: none; background: linear-gradient(0deg,#333,#000); outline: none; border-radius: 20px; box-shadow: 0 0 0 4px #353535, 0 0 0 5px #3e3e3e , inset 0 0 10px rgba(0,0,0, 1), 0 5px 20px rgba(0,0,0,.5), inset 0 0 15px rgba(0,0,0,.2); } input:checked[type="checkbox"] { background: linear-gradient(0deg,#6dd1ff,#20b7ff); box-shadow: 0 0 2px #6dd1ff,0 0 0 4px #353535, 0 0 0 5px #3e3e3e , inset 0 0 10px rgba(0,0,0, 1), 0 5px 20px rgba(0,0,0,.5), inset 0 0 15px rgba(0,0,0,.2); } input[type="checkbox"]:before{ content: ''; position: absolute; top: 0; left: 0; width: 80px; height: 40px; background:linear-gradient(0deg,#000, #6b6b6b); border-radius: 20px; box-shadow: 0 0 0 1px #232323; transform:scale(.98,.96); transition: 0.5s; } input:checked[type="checkbox"]:before{ left: 40px; } input[type="checkbox"]:after{ content: ''; position: absolute; top: calc(50% - 2px); left: 65px; width: 4px; height: 4px; background:linear-gradient(0deg,#6b6b6b,#000) ; border-radius: 50%; transition: 0.5s; } input:checked[type="checkbox"]:after{ background: #63cdff; left: 105px; box-shadow: 0 0 5px #13b3ff,0 0 15px #13b3ff; }

@@harshsoni7620 body { margin: 0; padding: 0; background: #292929; } .center { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } input[type="checkbox"] { position: relative; width: 120px; height: 40px; -webkit-appearance: none; background: linear-gradient(0deg,#333,#000); outline: none; border-radius: 20px; box-shadow: 0 0 0 4px #353535, 0 0 0 5px #3e3e3e , inset 0 0 10px rgba(0,0,0, 1), 0 5px 20px rgba(0,0,0,.5), inset 0 0 15px rgba(0,0,0,.2); } input:checked[type="checkbox"] { background: linear-gradient(0deg,#6dd1ff,#20b7ff); box-shadow: 0 0 2px #6dd1ff,0 0 0 4px #353535, 0 0 0 5px #3e3e3e , inset 0 0 10px rgba(0,0,0, 1), 0 5px 20px rgba(0,0,0,.5), inset 0 0 15px rgba(0,0,0,.2); } input[type="checkbox"]:before{ content: ''; position: absolute; top: 0; left: 0; width: 80px; height: 40px; background:linear-gradient(0deg,#000, #6b6b6b); border-radius: 20px; box-shadow: 0 0 0 1px #232323; transform:scale(.98,.96); transition: 0.5s; } input:checked[type="checkbox"]:before{ left: 40px; } input[type="checkbox"]:after{ content: ''; position: absolute; top: calc(50% - 2px); left: 65px; width: 4px; height: 4px; background:linear-gradient(0deg,#6b6b6b,#000) ; border-radius: 50%; transition: 0.5s; } input:checked[type="checkbox"]:after{ background: #63cdff; left: 105px; box-shadow: 0 0 5px #13b3ff,0 0 15px #13b3ff; }

Awesome

Yes, just give each one a different class. HTML: CSS: .one { position: absolute; top: 100; left: 0; transform: translate(-50%, -50%); } .one input[type="checkbox"] { followed by the rest of the markup.

@@frankgregory6845 hahaha, you were on full flow to write whole code here .

@@eshku ty

i did it in vscode, try upgrading your vs to the latest version

ViralVideo You may need use pseudo selectors

easy just type Off to the left and On to the right in the html file and then in the css file just add margin-left 20px, margin-right 20px and margin-bottom -20px.

Meem Financial Hawk thank you!

@Alex Undiscovery 😂😂😂

everything worked perfect.. mera ho gaya

Yaa,this also happened with me,but tried next time and it was successful

Yaa bro in my case little mini circle in button appearing in top right corner not in center why?

@@trickydude164 are you using top: calc(50% - 2px)? that positions the small circle. If you make the button larger than you have to adjust the pixels to sit were you want.

@@carguy1320 do margin: 0px auto;

Make sure you add the spaces : " top: calc(50% - 2px);" that was my mistake