in this tutorial, I will show you how to make a Toggle button using HTML And CSS Only.
Using a Toggle button rather than a normal checkbox will make your website looks more professional and more beautiful.
HTML Code
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="container">
<!-- Make the filled Toggle button design -->
<label class="fill">
<input type="checkbox" id="toggle">
<span class="switch"></span>
</label>
<!-- Make the lined Toggle button design -->
<label class="line">
<input type="checkbox" id="toggle">
<span class="switch"></span>
</label>
</div>
</body>
</html>
CSS Code
body{
background-color: #707070;
}
.container{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
label{
width: 68px;
height: 32px;
position: relative;
display: block;
margin-bottom: 10px;
}
/* hide the default input */
label input{
opacity: 0;
width: 0;
height: 0;
}
/* design the custom input */
.switch{
position: absolute;
cursor: pointer;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-radius: 32px;
}
/* create the filled toggle*/
.fill .switch{
background-color: #fafafa;
}
/* create the lined toggle*/
.line .switch{
border: 2px solid #fff;
}
/* Add the indicator to the toggle */
.switch::before{
position: absolute;
top: 50%;
left: calc(10% + 12px);
transform: translate(-50%,-50%);
content: '';
display: block;
width: 25px;
height: 25px;
border-radius: 50%;
transition: .4s;
}
.fill .switch::before{
background-color: #0091ea;
}
.line .switch::before{
background-color: #fff;
}
input:checked + .switch::before{
background-color: #80d8ff;
left: calc(100% - 18px);
}
Enjoy this Project, don't hesitate to customize it and change the color to adapt it to your web design.
Create Toggle Button using HTML and CSS only
Reviewed by Medics
on
July 12, 2019
Rating:
Reviewed by Medics
on
July 12, 2019
Rating:
No comments: