You are currently viewing HOW TO MAKE SLIDING TOGGLE SWITCH BUTTON IN CSS

HOW TO MAKE SLIDING TOGGLE SWITCH BUTTON IN CSS

HOW TO MAKE SLIDING TOGGLE SWITCH BUTTON IN CSS

The switch button can be used to represent the on and off state for some functionalities. Sometimes the switch button can be used instead of radio buttons or checkboxes. In this tutorial, we will learn to create a toggle switch using CSS.

we will just create a basic structure for the Toggle Switch 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

<div class="custom-checkbox">
  <input id="status" 
         type="checkbox" 
         name="status">
  <label for="status">
    <div class="status-switch"
         data-unchecked="Off"
         data-checked="On">
    </div>
  </label>
</div>

Hopefully, the markup speaks for itself but here are some points if you’re not sure what’s going on above:

  • We wrap everything in a div which we’ll use to set an overall height and width for our Toggle Switch
  • There is a checkbox input which we’ll hide with our CSS styles, the main content will be inside the label element (which itself has a further div inside it)
  • Specifying the input‘s id inside the for attribute of the label element allows the user to check/uncheck the checkbox input element by clicking the label element
  • The div inside the label has two data attributes (data-unchecked and data-checked) which will form the text for the two states of our slide toggle

Initially, I had tried using two radio button inputs for the slide Toggle Switch with each representing either an on or off state.

However, I only got so far with this approach before the styling became a nightmare so I decided to change the radios for a single checkbox which made everything much easier.

As the slide Toggle Switch can only have two states; either ‘checked’ or ‘unchecked’, it makes more sense to use a checkbox.

HTML OUTPUT

Toggle Switch

You Might Like This:

SCSS (CSS) CODE

* { box-sizing: border-box; }
html, body {   height: 100%; }
body {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Helvetica, Arial, sans-serif;
}

.custom-checkbox {
  width: 340px;
  height: 80px;
  input#status {
    display: none;
    
    // Unchecked State
    + label {
      height: 100%;
      width: 100%;
      > .status-switch {
        cursor: pointer;
        width: 100%;
        height: 100%;
        position: relative;
        background-color: grey;
        color: white;
        transition: all 0.5s ease;
        padding: 3px;
        border-radius: 3px;

        &:before,
        &:after {
          border-radius: 2px;
          height: calc(100% - 6px);
          width: calc(50% - 3px);
          display: flex;
          align-items: center;
          position: absolute;
          justify-content: center;
          transition: all 0.3s ease;
        }
        
        &:before {
          background-color: white;
          color: black;
          box-shadow: 0 0 4px 4px rgba(#000, 0.2);
          left: 3px;
          z-index: 10;
          content: attr(data-unchecked);
        }
        
        &:after {
          right: 0;
          content: attr(data-checked);
        }
      }
    }

    // Checked stae
    &:checked + label > .status-switch {
      background-color: #40c253;
 
      &:after {
        left: 0;
        content: attr(data-unchecked);
      }
 
      &:before {
        color: #40c253;
        left: 50%;
        content: attr(data-checked);
      }
    }
  }
}

The styling of the Toggle Switch could be done in plain CSS however, using SCSS makes working with the hierarchy of elements easier.

CSS code is used to make an attractive HTML component. This CSS property is used to make the style on the 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 Toggle 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 Toggle Switch

We can use other CSS properties to customize the Toggle Switch accordingly.

Final Output 

Final Output
Final Output

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 – Ninja_webTech

Leave a Reply