A toggle switch is a useful way to enable or disable a feature of a web application. In this article, you are going to know how to implement this with pure CSS.
In this blog, you can get the simple toggle switch functionality.
Toggling is just selecting and deselecting a particular functionality. For example, if you want to switch from light mode to dark mode we will use this toggle switch. We are frequently using this toggle switch in our mobile applications to change the required settings. Click here to get the dark-mode functionality with JS.
Let’s move on to the goal of the blog, initially, we will write the required HTML then followed by CSS.
HTML for the toggle switch
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Toggle switch pure CSS</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<form class="form-container" action="">
<div class="switch">
<div class="switch_box box_1">
<input type="checkbox" class="switch" />
<span class="on">OFF</span>
<span class="off">ON</span>
</div>
</div>
</form>
</body>
</html>Let us have a look at our switch and how it could be without CSS. here is the screenshot for your reference.
It is just a checkbox with on and off text. So guys, let’s get into the CSS to see the miracle.
CSS for the toggle switch
Style.css
.switch {
display: inline-flex;
align-items: center;
}
.switch_box {
display: -webkit-inline-box;
display: -moz-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 0 10px 0 25px;
}
input[type="checkbox"].switch {
font-size: 30px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 3.5em;
height: 1.5em;
background: #ddd;
border-radius: 3em;
position: relative;
cursor: pointer;
outline: none;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
border: 1px solid rgb(3 115 9);
}
.form-container {
max-width: 45%;
margin: 50px auto;
text-align: center;
background: skyblue;
padding: 7% 0;
color: white;
}
.off {
display: none;
}
.on {
position: relative;
left: -50px;
color: rgb(3 115 9);
font-weight: bolder;
font-size: 17px;
}
input[type="checkbox"].switch:checked {
background: rgb(4, 172, 13, 0.6);
border: none;
}
input[type="checkbox"].switch:checked ~ .on {
display: none;
}
input[type="checkbox"].switch:checked ~ .off {
display: inline;
position: relative;
left: -88px;
color: #fff;
font-weight: bolder;
font-size: 17px;
}
input[type="checkbox"].switch:after {
position: absolute;
content: "";
width: 1.5em;
height: 1.5em;
border-radius: 50%;
background: #fff;
-webkit-box-shadow: 0 0 0.25em rgba(0, 0, 0, 0.3);
box-shadow: 0 0 0.25em rgba(0, 0, 0, 0.3);
-webkit-transform: scale(0.7);
transform: scale(0.7);
left: 0;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
input[type="checkbox"].switch:checked:after {
left: calc(100% - 1.5em);
}Just go to your style.css file and add the above code. Do you want to be surprised by the result? Have a look at the below screenshot.
Final results
Here are the functionality results. This is just a simple and plain toggle switch. If you want to get more toggle switches with different effects you can look here (blog - as many examples for toggles switches)
Conclusion:
We have done an amazing job, with simple CSS we have created the functional toggle switch. Hope you guys received the required information about your requirement. Let us know if we missed anything, in the comment section will get back to you soon.
21 likes
Add to read list
Comments