custom toggle switch using css | toggle switch using css







 custom toggle switch using css | toggle switch using css






WelcomeğŸŽ‰ to codewithrandom blog in this blog we learn that how we create custom toggle switch using css . We use HTML & css  for this custom toggle switch using css .  Hope you enjoy our blog so let’s start with a basic HTML structure for custom toggle switch using css .

HTML code toggle switch using css 

 <!DOCTYPE html>  
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>custom toggle switch using css</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="toggle">
<input type="checkbox" name="" id="">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>

There is all HTML code for toggle switch using css . Now you can see output without css then we write css for our toggle switch using css .

custom toggle switch using css | toggle switch using css

CSS for  toggle switch

 *{  
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #171717;
}
.toggle{
width: 80px;
height: 40px;
background: #1b1b1b;
border-radius: 50px;
position: relative;
overflow: hidden;
cursor: pointer;
}
.toggle input{
position: absolute;
width: 100%;
height: 100%;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
z-index: 10;
}
.left, .right{
position: absolute;
width: 50%;
height: 100%;
background: #2b2b2b;
border-radius: 50px;
border: 15px solid rgb(19, 19, 19);
transform: translateX(-2px);
/* box-shadow: 10px 0 25px #272727; */
transition: all .2s;
}
.toggle input:checked ~ .left{
transform: translateY(-100%);
}
.right{
right: 0;
transform: translateY(100%);
transform: translateX(100%);
background: #DA0037;
box-shadow: -10px 0 25px #da003770;
transition: all .2s;
}
.toggle input:checked ~ .right{
transform: translateY(0%);
}

Now we complete our css section,  Here is our updated output with css.


custom toggle switch using css | toggle switch using css


In this post, we learn how to create  toggle switch using css with simple coding of HTML & css . If we did a mistake or any confusion please drop a comment so give a reply or help you in easy learning.
project: by @coding_gyan_
written by – codewithrandom/Anki 

Share on:

Leave a Comment