How to Create Toggle Switch by using HTML and CSS ?

18 May, 2022
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. We can do that by using the HTML label tag and HTML input type = checkbox.
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
<!DOCTYPE html><html>   <head>    <title>toggle switch</title></head> <body>    <center>        <h1>GeeksforGeeks</h1>        <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>
 Designing Structure: In the previous section, we have created the structure of the toggle switch. We will design the switch and make that responsive in this section.
CSS code: CSS code is used to make an attractive HTML component. This CSS property is used to make the style on the toggle switch.
CSS
<style>    h1 {        color: green;    }               /* toggle in label designing */    .toggle {        position : relative ;        display : inline-block;        width : 100px;        height : 52px;        background-color: red;        border-radius: 30px;        border: 2px solid gray;    }               /* After slide changes */    .toggle:after {        content: '';        position: absolute;        width: 50px;        height: 50px;        border-radius: 50%;        background-color: gray;        top: 1px;        left: 1px;        transition:  all 0.5s;    }               /* Toggle text */    p {        font-family: Arial, Helvetica, sans-serif;        font-weight: bold;    }               /* Checkbox checked effect */    .checkbox:checked + .toggle::after {        left : 49px;    }               /* Checkbox checked toggle label bg color */    .checkbox:checked + .toggle {        background-color: green;    }               /* Checkbox vanished */    .checkbox {        display : none;    }</style>
Combining HTML and CSS Code: This is the final code that is the combination of the above two sections. It will be displaying the toggle switch.
HTML
<!DOCTYPE html><html>   <head>    <title>toggle switch</title>         <style>        h1 {            color: green;        }                       /* toggle in label designing */        .toggle {            position : relative ;            display : inline-block;            width : 100px;            height : 52px;            background-color: red;            border-radius: 30px;            border: 2px solid gray;        }                       /* After slide changes */        .toggle:after {            content: '';            position: absolute;            width: 50px;            height: 50px;            border-radius: 50%;            background-color: gray;            top: 1px;            left: 1px;            transition:  all 0.5s;        }                       /* Toggle text */        p {            font-family: Arial, Helvetica, sans-serif;            font-weight: bold;        }                       /* Checkbox checked effect */        .checkbox:checked + .toggle::after {            left : 49px;        }                       /* Checkbox checked toggle label bg color */        .checkbox:checked + .toggle {            background-color: green;        }                       /* Checkbox vanished */        .checkbox {            display : none;        }    </style></head> <body>    <center>        <h1>GeeksforGeeks</h1>        <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>
Output: 
HTML and CSS both are foundation of webpages. HTML is used for webpage development by structuring websites, web apps and CSS used for styling websites and webapps. You can learn more about HTML and CSS from the links given below:
HTML Tutorial and HTML Examples.
CSS Tutorial and CSS Examples.
sweetyty
hardikkoriintern
CSS-Misc
HTML-Misc
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
CSS to put icon inside an input element in a form
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
REST API (Introduction)
Hide or show elements in HTML using display property