This is the most elegant checkbox I have ever seen on the net, the shadows are so beautiful and so unique not many people will spend the time to make such a beautiful and elegant design.
its really a great design yet you still need to work on the synchronization of the blue light with the transition so the button reach the end of the edge same as the light turn up.
Hi. Great job and tutorials! Keep it up! I know all of this css tricks and I wonder... may we make an extremely amazing and lightweight web framework better than the BS4?
CSS: .one { position: absolute; top: 100; left: 0; transform: translate(-50%, -50%); } .one input[type="checkbox"] { followed by the rest of the markup.
What if I don't want to position it in the center of the page every time? I would really like it to be an inline checkbox, but cannot figure out how to do it.
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.
@@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.
This is the most elegant checkbox I have ever seen on the net, the shadows are so beautiful and so unique not many people will spend the time to make such a beautiful and elegant design.
Bootstrap developers need to see this!
Your channel is a treasure, man... Thank you
Awesome design.. Watching from bangladesh... Just amazing bro
Very well use of after and before. 🔥🔥
Greetings from Brazil, I love your videos, thanks
Broh you're awesome!
Very Help. Good Bro
I am feeling very happy after making it on my own
It's dope man. Thank you so much.
Thank you, I'll try to make this soon!
woo sooo beautiful sir
I don't have too much many But if I have I will surely join your CSS animation course . 🥺🥺🥺🥺🔥🔥
You are lit. 🔥🔥🔥🔥
Yo this is so dope. Nice work! 🔥
Great Tutorials Sir
thx dude u r the best
I love your tutorial s
That was better than I expected
Bro..your a pro! ☝ amazing
Klass! Super 👍👍👍
Great design
Wow bro u r jst amazing....
Wow... How did you get this amazing in CSS? Bravo!
super
amazing!
Joder tío eres un crack, muchas gracias por estos fantásticos vídeos.
Un saludo cordial
Very talented
Awesome
Best bro
just amazing!
Thank you!
i never imagine that css can be used like this.
Yes
Yea!
Nice
very helpfull.☺
Nyc 1 bro
its really a great design yet you still need to work on the synchronization of the blue light with the transition so the button reach the end of the edge same as the light turn up.
This is awesome man, thanks. I just have one question, is there any noticable performance overhead in the browswer for this?
Thank you. It's great;
Great Tutorials
Hi. Great job and tutorials! Keep it up! I know all of this css tricks and I wonder... may we make an extremely amazing and lightweight web framework better than the BS4?
guys, can I make this checked background appear with some delay somehow?
You awesome 😍
Great one. Can u create multiple checkbox(6) design in a form.
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 .
in input type check box is there any way to costumize only that specific class not all checkboxes?
@@eshku ty
beautifull!
Awesome.
This was awesome!
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;
}
Ye mobile ke liye he kya
Is there any images
tu tromp tu execute dans quel navigateur
Wow the best!!!!! I'll definitely use this for my website!!!
Awesome
Super
what methodology do you use to give styles
ul{
styles:
}
li{
styles:
}
I'd like to see all form itens with same design. Thanks!
Cool❤️
in which software you make this
amazing work thanks to you , i would prefer you add source code !
Super ❤️
Amazing
Amazing video!!!
Hit the like button‼
If you could explain some property of css that are not usually used by beginner level or intermediate level front-end developer that would help a lot.
What if I don't want to position it in the center of the page every time? I would really like it to be an inline checkbox, but cannot figure out how to do it.
hi dude ..in my visual code it is showing that there is no "-WebKit -appearance"
what I should do...
please help me
i did it in vscode, try upgrading your vs to the latest version
supper
I run this code as it is but it is only making a black backgroundwith checkbox you showing only half code in video
Actually linear gradient is not working in my project. Plz help me what to do ? How will it display all work?
-webkit-appearance:none; is not working it showing some warning like " Property is nonstandard. Avoid using it." how to solve it...
Wtf you eat bro? You are fucking awesome. 👀❤️
Make it as a Web Component
Please keep the code also in description
Source code please bro
“input[type=“checkbox”]:before”
this not working.
plz help me!
Meem Financial Hawk thank you!
Sir,
In this chechbox how to apply day and night mode. I tried a lot but nothing happened. Please give me solutions sir... please please please sir
ViralVideo You may need use pseudo selectors
Bro please make a video on Like,Share And Comment button and box with css.
source code please
Hi frend weris the Cood plase
How to add "ON" and "OFF" text to it?
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.
Sahre the code please
Button not coming in center , It is in top left
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
Likeeeeeee 👍
4m 21sec
Pls how multiple values are handled for box-shadow
Please post video How to handle css3 property with multiple values sir
Send me code sir css
@Alex Undiscovery 😂😂😂
Are kisi ne kar ke bhi dekha hai...mera nahi hua.... In english...i tried but prtially successful...no rounded corners
everything worked perfect.. mera ho gaya
Great, but no responsive :/
Dont use it ,if you write the content it wont align in box. so it is not useful