Open In App

How to Create Toggle Switch by using HTML and CSS ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

Toggle Switch

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.

Steps:

  • Create an HTML file with a title, heading, and a checkbox with an associated label for the toggle switch.
  • Now style the toggle switch using CSS, specifying colors, dimensions, and transitions.
  • Also, apply CSS transitions to animate the toggle switch by adjusting the position of the pseudo-element.
  • Use CSS to change the appearance when the checkbox is checked, modifying the toggle switch’s background and the pseudo-element’s position.
  • Also hide the checkbox using CSS (display: none;) to maintain a seamless appearance. Save and view the result in a browser.

Example: In this example we will create HTML structure of toggle switch.

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>


 

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>


Example : 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:



Last Updated : 11 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads