How to Create Toggle Switch by using HTML and CSS ?

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.

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

<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 cheked effect */
    .checkbox:checked + .toggle::after {
        left : 49px
    }
            
    /* Checkbox cheked toggle label bg color */
    .checkbox:checked + .toggle {
        background-color: green;
    }
            
    /* Checkbox vanished */
    .checkbox { 
        display : none;
    }
</style>

chevron_right


 

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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 cheked effect */
        .checkbox:checked + .toggle::after {
            left : 49px; 
        }
                
        /* Checkbox cheked 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>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.