How to Make a Toggle Button using Checkbox and CSS ?

Last Updated : 02 May, 2023

Toggle means switching actions from one state to another. In simple words, when we switch from one state to the other state and back again to the former state we say that we are toggling. In this article, we are using the checkbox and CSS to create a toggle button.

In web development, we can use this toggle feature to do various things like switching to night mode from light mode and vice-versa.

Creating a toggle feature using CSS: Normally to create a toggle feature we use JavaScript, but there is another way to do it using CSS. Using this method we can avoid using JavaScript altogether and achieve the toggle effect.

Here is a quick overview of what we are going to do:

Create a checkbox input with a label, a box (using <div>).
Write CSS that toggles the color of the box from red to yellow.

We will use a checked pseudo-class on the checkbox input to make the toggle button.

Syntax:

selector:checked{
    /* property: value;*/
}

The: checked pseudo-class selector, represents a checkbox that is in a checked state

Example 1: In this example, HTML code is used to create the basic structure for the toggle button In which we create checkbox input with a label, and with the help of CSS we provide toggling in the color of our button

HTML

<!-- Making a toggle button using checkbox and CSS -->
<!DOCTYPE html>
<html lang="en">
 
<head>
    <style>
        h2 {
            color: green;
        }
 
        /* styles for label */
        .label {
            font-size: 20px;
            user-select: none;
            cursor: pointer;
        }
 
        /* Creating a 100x100 box with red color */
        .box {
            margin-top: 40px;
            width: 100px;
            height: 100px;
            background-color: red;
        }
 
        /* hiding the checkbox */
 
        #chk-btn {
            background-color: skyblue;
        }
 
        /* Changing the color of the box 
        to yellow from red */
        #chk-btn:checked+.box {
            background-color: yellow;
        }
    </style>
 
    <title>Checkbox as a button</title>
</head>
 
<body>
    <h2>GeeksforGeeks</h2>
     
    <p>
        Making a toggle button using 
        checkbox and pure CSS
    </p>
 
    <label class="label">Click Me</label>
    <input id="chk-btn" type="checkbox">
 
    <div class="box"></div>
</body>
 
</html>

Output:

Example 2: In this example, The HTML document includes a checkbox and slider element with a white ball. The slider overlays the checkbox and turns green when checked, moving the white ball to the right to indicate the “on” position. CSS code determines the layout, position, and appearance of toggle switches. The “.toggle” and “.slider” classes set the position, size, and appearance of the toggle and slider elements, respectively. The “.slider:before” class specifies the white ball’s appearance in the slider.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>GeeksforGeeks</title>
    <style>
        .toggle {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 34px;
        }
         
        /* Hide the checkbox input */
        .toggle input {
            display: none;
        }
         
        /* Describe slider's look and position. */
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: gray;
            transition: .4s;
            border-radius: 34px;
        }
         
        /* Describe the white ball's location 
              and appearance in the slider. */
        .slider:before {
            position: absolute;
            content: "";
            height: 26px;
            width: 26px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }
         
        /* Modify the slider's background color to 
              green once the checkbox has been selected. */
        input:checked+.slider {
            background-color: green;
        }
         
        /* When the checkbox is checked, shift the 
              white ball towards the right within the slider. */
        input:checked+.slider:before {
            transform: translateX(26px);
        }
    </style>
</head>
 
<body>
    <label class="toggle">
        <input type="checkbox">
        <span class="slider"></span>
    </label>
</body>
</html>