Button Slide and Light Effect With CSS
Button Slide and Light Effect:-
Code:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
margin:0;
padding:0;
background:#292929;
}
.center{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
input[type="checkbox"]
{
position: relative;
width: 120px;
height:40px;
-webkit-appearance:none;
background:linear-gradient(0deg, #333, #000);
outline: none;
border-radius:20px;
box-shadow: 0 0 0 4px #353535, 0 0 0 5px #3e3e3e, inset 0 0 10px rgba(0,0,0,1), 0 5px 20px rgba(0,0,0,.5), inset 0 0 15px rgba(0,0,0,.2);
}
input:checked[type="checkbox"]{
background:linear-gradient(0deg, #6dd1ff, #20b7ff);
box-shadow:0 0 2px #6dd1ff ,0 0 0 4px #353535, 0 0 0 5px #3e3e3e, inset 0 0 10px rgba(0,0,0,1), 0 5px 20px rgba(0,0,0,.5), inset 0 0 15px rgba(0,0,0,.2);
}
input[type="checkbox"]:before{
content: '';
position: absolute;;
top:0;
left:0;
width: 80px;
height:40px;
background: linear-gradient(0deg, #000, #6b6b6b);
border-radius: 20px;
box-shadow: 0 0 0 1px #232323;
transform: scale(.98,.96);
transition: .5s;
}
input:checked[type="checkbox"]::before{
left: 40px;
}
input[type="checkbox"]:after{
content: '';
position: absolute;
top:calc(50% - 2px);
left:65px;
width: 4px;
height:4px;
background:linear-gradient(0deg, #6b6b6b, #000);
border-radius: 50%;
transition: .5s;
}
input:checked[type="checkbox"]:after{
background: #63cdff;
left: 105px;
box-shadow: 0 0 5px #13b3ff, 0 0 15px #13b3ff;
}
</style>
</head>
<body>
<div class="center">
<input type="checkbox" name="">
</div>
</body>
</html>
Output:-
Comments
Post a Comment
Please do not enter any spam link in the comment box.