Custom CSS Animated Checkbox | how to make css switch / toggle / custom checkbox
Html Code
<div class="container">
<div class="switch-holder">
<div class="switch-label">
<span>Lorem ipsum dolor sit amet.</span>
</div>
<div class="switch-toggle">
<input type="checkbox" id="button">
<label for="button"></label>
</div>
</div>
</div>
Css Code
* {
box-shadow: none;
}
body {
transform: scale(1) !important;
font-family: sans-serif;
margin: 0;
width: 100%;
height: 100vh;
background-color: #d1dad3;
display: flex;
justify-content: center;
align-items: center;
font-size: 17px;
}
.container {
max-width: 1000px;
width: 100%;
display: flex;
align-items: center;
justify-content: space-around;
}
.switch-holder {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 20px;
border-radius: 10px;
margin-bottom: 30px;
box-shadow: -8px -8px 15px #ffffffb3,
10px 10px 10px #0000004d,
inset 8px 8px 15px #ffffffb3,
inset 10px 10px 10px #0000004d;
}
.switch-label {
width: fit-content;
margin-right: 24px;
}
.switch-toggle {
height: 40px;
}
.switch-toggle input[type="checkbox"] {
position: absolute;
opacity: 0;
z-index: -2;
}
.switch-toggle input[type="checkbox"]+label {
position: relative;
display: inline-block;
width: 100px;
height: 40px;
border-radius: 20px;
margin: 0;
cursor: pointer;
box-shadow: inset -8px -8px 15px #ffffff99,
inset 10px 10px 10px #00000040;
}
.switch-toggle input[type="checkbox"]+label::before {
position: absolute;
content: 'OFF';
font-size: 13px;
text-align: center;
line-height: 25px;
top: 8px;
left: 8px;
width: 45px;
height: 25px;
border-radius: 20px;
background: #d1dad3;
box-shadow: -3px -3px 5px #ffffff80, 3px 3px 5px #00000040;
transition: .3s ease-in-out;
}
.switch-toggle input[type="checkbox"]:checked+label::before {
left: 50%;
content: 'ON';
color: #fff;
background-color: #003cff;
box-shadow: -3px -3px 5px #ffffff80, 3px 3px 5px #003cff;
}
Please subscribe our channel and support me.
Please like and 1 comment this video.
If you are visiting my channel for the first time then please subscribe
Go to my Youtube channel : https://www.youtube.com
I will remove the timer if 1000 subscriber on my channel and All video source code without timer, will be provided.
Disclaimer video is for educational purpose only. Copyright Disclaimer Under Section 107 of the Copyright Act 1976, allowance is made for "fair use" for purposes such as criticism, comment, news reporting, teaching, scholarship, and research. Fair use is a use permitted by copyright statute that might otherwise be infringing. Non-profit, educational or personal use tips the balance in favor of fair use .
Thanks..
Copyright © 2021-2023 | WsCoder | All Right Reserved
