How To Make Sliding 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 an HTML document like below. We can do that by using the HTML label tag and HTML input type = checkbox.

50+ HTML, CSS and JavaScript Projects With Source Code

HTML Code For Sliding Button

<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 the 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.

Create Resume/CV Website Using HTML and CSS (Source Code)

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 Code Output

You Might Like This:

• Multiple Choice Quiz
• Create Social Media Icon Hover
• Portfolio Website Using Html And Css
• Word Guessing Game in HTML CSS & JavaScript
• Dark Mode Toggle Button

Css Code For Sliding Button

* {
  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;
}
.custom-checkbox input#status {
  display: none;
}
.custom-checkbox input#status + label {
  height: 100%;
  width: 100%;
}
.custom-checkbox input#status + label > .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;
}
.custom-checkbox input#status + label > .status-switch:before, .custom-checkbox input#status + label > .status-switch: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;
}
.custom-checkbox input#status + label > .status-switch:before {
  background-color: white;
  color: black;
  box-shadow: 0 0 4px 4px rgba(0, 0, 0, 0.2);
  left: 3px;
  z-index: 10;
  content: attr(data-unchecked);
}
.custom-checkbox input#status + label > .status-switch:after {
  right: 0;
  content: attr(data-checked);
}
.custom-checkbox input#status:checked + label > .status-switch {
  background-color: #40c253;
}
.custom-checkbox input#status:checked + label > .status-switch:after {
  left: 0;
  content: attr(data-unchecked);
}
.custom-checkbox input#status:checked + label > .status-switch: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.We use the button property to add customization to our buttons, allowing us to add a variety of design, such as a hover effect.We use the button property to add customization to our buttons, allowing us to add a variety of design, such as a hover effect.

Final Output Of Css Sliding Button

If you enjoyed reading this Toggle Switch by using HTML and CSS post and have found it useful for you, then please give share it 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