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. We can do that by using the HTML label tag and HTML input type = checkbox.

HTML Code

<!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>Toggle switch with HTML and CSS</title>
  </head>
  <body>
    <center>
      <h1>Ninja webTech</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>

 

The first thing we‚Äôll do is create a folder that will contain all of the files that make up the project. Create an empty folder on your devices and name it ‚Äúas you want‚ÄĚ.

Open up Visual Studio Code or any Text editor which is you liked, and create files(index.html, style.css) inside the folder which you have created for toggle switch. In the next step, we will start creating the basic structure of the webpage.

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.

TO create this toggle switch button we used Html label tag 

The <label> tag in HTML is used to provide a usability improvement for mouse users i.e, if a user clicks on the text within the <label> element, it toggles the control. The <label> tag defines the label for <button>, <input>, <meter>, <output>, <progress>, <select>, or <textarea> element.

The <label> tag can be used in two ways: 

  • Firstly, use <label> tag by providing the <input> and id attribute. The <label> tag needs a¬†for¬†attribute whose value is the same as input id.
  • Alternatively, <input> tag use directly inside the <label> tag. In this case, the¬†for¬†and id attributes are not needed because the association is implicit.

Toggle switch first add an HTML checkbox using <input> tag with type="checkbox". Now we need to add the CSS properties to create it as a toggle switch. We will hide the default checkbox and add a slider to it.

  • Use the¬†position¬†property to position the slider with respect to the switch.
  • Add the¬†height¬†and¬†width¬†to the switch.
  • Add a different¬†background-color¬†to the slider to display the on-off state.
  • Use the¬†transform¬†property to add slide effect to the slider

We can use other CSS properties to customize the switch accordingly.

You Might Like This:

HTML Output

Create Toggle Switch by using HTML and CSS

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

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.

‚ÄúIn CSS, the switch is used to provide a way for the user to select any one state, either on or off. The toggle switch is something that we have to move left or right. We use the toggle switches for on and off or for yes or no. We use these switches on our websites, mobile apps, and software. When we turn off or on some element or select yes or no, we have toggle switches there. We have different types of toggle switches available in CSS. We will create toggle switches by using HTML and CSS here in this guide. We will explain how to create these toggle switches in detail and explain how these toggle switches work.‚ÄĚ

  1. We removed all the default padding and margin that comes with our html page.
  2. For our body, we set the height and width to be 100% of the viewport height and width respectively. Then we used flexbox to align everything to the center of our screen.
  3. For our input tag, we first set the height and width of each of our input element to 30px respectively. Then we set appearance to none so we can add our own styling to the radio button by adding a border radius of 50% to make them a circle, an opacity of zero to make them invisible by default and a background-color of black so we can actually see them when we make any of them visible.
  4. We added cursor: pointer on hover to make it a little more elegant.
  5. We used flexbox to center our input tags inside of our tri-state-state container, then added a border-radius of 50px to make it look much better.
  6. Finally we make the first input element visible.

Final Output 

Create Toggle Switch by using HTML and CSS2
Create Toggle Switch by using HTML and CSS2

Source code 

If you enjoyed reading this Toggle Switch by using HTML and CSS post and have found it useful for you, then please give a share with your friends, and follow me to get updates on my upcoming posts. You can connect with me on Instagram.

if you have any confusion Regarding Toggle Switch by using HTML and CSS Comment below or you can contact us by filling out our contact us form from the home section.

written by ‚ÄstNinja_webTech

Share on:

Leave a Comment