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>
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%);
}
Check it morecss responsive menu | CSS animated Menu
countdown timer html javascript | free countdown timer
Custom checkbox in CSS ? | Create a custom checkbox 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
Check it more
css responsive menu | CSS animated Menu
countdown timer html javascript | free countdown timer
Custom checkbox in CSS ? | Create a custom checkbox 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
Post a Comment