How to make a sliding toggle switch button using HTML and CSS.

A toggle switch is used to represent changes in two states for example the on and off states. In this tutorial I will show you how to create a sliding toggle switch using HTML and CSS.

The code below is an example of how a sliding toggle switch can be achieved using HTML and CSS

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>CSS toggle switch</title>
        <link rel ="stylesheet" href="style.css">
    </head>
    <body>
        <div>
        <label>
          <input type="checkbox" checked/>
          <div>
            <span class="on">On</span>
            <span class="off">Off</span>
          </div>  
          <i></i>
        </label>
        </div>
    </body>
</html>

CSS

*, *:before, *:after {
    box-sizing: border-box;
  }
   
  
   
  body {
    font-family: Arial, Helvetica, sans-serif
     
    line-height: 1.6;
  }
  body > div {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
   
  label {
    transform: scale(1.5);
    display: block;
    width: 160px;
    background: #CCC;
    height: 80px;
    border-radius: 50px;
    position: relative;
     
  }
  label input {
    display: none;
  }
  label div {
    display: block;
    width: 120px;
    height: 50px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 25px;
  }
  label div:after {
    content: "";
    position: absolute;
    display: block;
    height: 46px;
    width: 116px;
    left: 2px;
    top: 2px;
    border-radius: 23px;
    background: #E38F7A;
    box-shadow: inset 0 0 30px 0 rgba(0, 0, 0, 0.8);
    transition: 0.2s;
  }
  label i {
    display: block;
    width: 60px;
    height: 60px;
    position: absolute;
    background: linear-gradient(to top, #9e9e9e 20%, #f4f4f4);
    border-radius: 50%;
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.7);
    top: 10px;
    left: 15px;
    transition: 0.25s;
}
label i::after {
    content:"" ;
    position: absolute;
    display: block;
    width: 52px;
    height: 52px;
    left: 4px;
    top: 4px;
    border-radius: 50%;
    background: #d5d4d4;
    z-index: 1;
}
label input:checked ~ i {
    top: 10px;
    left: 86px;
}
label input:checked + div::after {
    background: #96D37C;
    box-shadow: inset 0 0 30px 0 rgba(0, 0, 0, 0.6);
}
 
label input:checked + div > .off {
    color: transparent;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0);
}
label input:checked + div > .on {
    color: #96D37C;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
 
}
label:hover{
    cursor: pointer;
}
label:focus,
label:active {
    outline: 0;
}
.on,
.off {
    text-transform: uppercase;
    position: absolute;
    left: 17px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5em;
    font-weight: bold;
    z-index: 2;
    transition: 0.25s;
}
.on {
    color: transparent;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0);
}
.off {
    left: initial;
    right: 17px;
    color: #E38F7A;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
}

Output

CSS toggle switch

A toggle switch is created using an HTML checkbox using <input> tag with type="checkbox". This checkbox is hidden by default using display: none; CSS property. However the checkbox determines the position of the button depending on whether it is checked or not.

The button is represented by <i> tags that are styled to make a circular button.

The movement of the button is determined by the top and left CSS properties using a general sibling selector. Initially the <i> element has position top:10px; left: 15px; and when the checkbox is checked the position of the button will be top: 10px; left: 86px; This is given by the CSS expression

label input:checked ~ i {
    top: 10px;
    left: 86px;
}

The sliding effect is achieved using the CSS transition property applied to the <i> element. This property takes on values of the time in seconds that the <i> element will use to move from one position to another.

I have also included different background colors and labels to show the on and off states using a number of CSS selectors.