Create toggle button using CSS, html and JavaScript
 |
| Toggle button |
Source code:-
<html>
<head>
<title>
</title>
</head>
<body>
<div class="b">
<input type="checkbox" >
</div>
<style>
*{
margin:0;
padding:0;
}
.b{position:absolute;
height:50px;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
input[type="checkbox"]
{
position:relative;
width:80px;
height:40px;
-webkit-appearance:none;
background:#c6c6c6;
outline:none;
border-radius:40px;
transition:5s;
box-shadow:solid 0 0 5px rgba(0,0,0,.2);
}
input:checked[type="checkbox"]
{
background:#03a9f4;
}
input[type="checkbox"]:before
{
content:'';
position:absolute;
width:40px;
height:40px;
border-radius:40px;
top:0;
left:0;
background:#fff;
transform:scale(1.1);
box-shadow:0 2px 5px rgba(0,0,0,.2);
transition:.5s;
}
input:checked[type="checkbox"]:before
{
left:40px;
}
input:checked[type="checkbox"]:after
{
left:80px;
}
</style>
</body>
</html>
hello world
ReplyDeletePost a Comment
If you have any doubts, Please let me know
Thanks!