Namaste!
Creative Switch Toggle ON/Off with CSS Checkbox Toggle
In this Tutorial of “Creative Switch Toggle ON-Off with CSS | CSS Checkbox Toggle”. I have created a toggle checkbox UI button with HTML & CSS. I also have shared the Source code here.
Which you can copy and replace into your files from below.
Creative Switch Toggle ON/Off Youtube Tutorial
Creative Switch Toggle ON/Off Source Code
Copy the below code and paste it into your project files. Have fun!.
.html file code
Put Below inside your HTML file’s <body> Your Code Here </body> tags
<div class="container">
<input type="checkbox">
</div>.css file code
Copy CSS code from Below and replace with yours inside your HTML file’s <style> Your Code Here </style> tags or
paste it into style.css file
body {
padding: 0;
margin: 0;
background: #5463ff;
}
.container {
position: absolute;
width: 320px;
height: 105px;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
top: 48%;
left: 50%;
}
input[type="checkbox"] {
appearance: none;
height: 100px;
width: 180px;
background-color: #34384b;
position: relative;
border-radius: 50px;
transition: 0.3s;
cursor: pointer;
outline: none;
}
input[type="checkbox"]:before {
content: "";
position: absolute;
height: 80px;
width: 80px;
background-color: #d5d5d5;
border-radius: 50%;
left: 10px;
top: 10px;
transition: 0.6s;
}
input[type="checkbox"]:checked {
background-color: #ececec;
}
input[type="checkbox"]:checked:before {
background-color: #5463ff;
left: 90px;
}
input[type="checkbox"]:checked:after {
content: "N";
color: #ececec;
}
input[type="checkbox"]:after {
content: "FF";
position: absolute;
font-family: sans-serif;
font-weight: 700;
font-size: 130px;
color: #d5d5d5;
left: 190px;
bottom: -25px;
letter-spacing: 1px;
transition: 0.6s;
}Thank You!
