How to Create Toggle Switch by using HTML and CSS

How to Create Toggle Switch by using HTML and CSS

To create a toggle switch, we will use HTML and CSS. If you want to add a more attractive toggle switch then you can add sliding animation, bouncing effect, etc. In this article, we will divide the whole thing into two different sections structure creating and designing the structure. Creating Structure: In this section, we will just create a basic structure for the toggle button. Here all we need to put a checkbox and a label to create in an HTML document like below. Let’s see How to Create Toggle Switch by using HTML and CSS.

  • HTML code: The HTML code is used to create a structure of toggle switch. Since it does not contain CSS so it is just a simple structure. We will use some CSS property to make it attractive responsive.

<html>
<head>
<title>toggle switch</title>
<style>

/* toggle in label designing */
.toggle {
position: relative;
display: inline-block;
width: 105px;
height: 55px;
background-color: #1d90fd;
border-radius: 30px;
border: 2px solid #1d90fd;
padding: 10px;
}

/* After slide changes */
.toggle:after {
content: ”;
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #FFFFFF;
top: 1px;
left: 1px;
bottom:1px;
transition: all 0.5s;
margin-bottom:5px;
}

/* Toggle text */
p {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}

/* Checkbox cheked effect */
.checkbox:checked + .toggle::after {
left : 49px;
}

/* Checkbox cheked toggle label bg color */
.checkbox:checked + .toggle {
background-color: #cccccc;
border: 2px solid #cccccc;
}

/* Checkbox vanished */
.checkbox {
display : none;
}
</style>
</head>

<body>
<center>

<b>Toggle switch with HTML and CSS</b>
<br><br>
<input type=”checkbox” id=”switch”
class=”checkbox” />
<label for=”switch” class=”toggle”>
<p>OFF ON</p>
</label>
</center>
</body>

</html>

How to Create Toggle Switch by using HTML and CSS
toggle switch
Toggle switch with HTML and CSS

Leave a Reply

Your email address will not be published. Required fields are marked *