CSS Toggle Switch

#html #css #tutorial #beginners

Hello, guys in this tutorial we will create an animated pure CSS toggle switch ( ON-OFF Switches ) simple HTML checkbox using HTML & CSS

Hello Friends, Today in this post, we’ll find out how to make Create a Custom ON/OFF switch with Pure CSS. recently I've got shared make a Custom Checkbox Design Using HTML & CSS, but our today’s topic could be a Create a CSS Toggle Switch.

Welcome to an article on how to create an awesome CSS Toggle Switch button with pure CSS. Are those “default checkboxes” too boring for you? Want to make a much better ON/OFF toggle button? although we cannot use direct CSS to customize it, you can still do it pretty easily with just some lines of pure CSS and HTML

Do you want to use custom styling on checkboxes? during this article, I’ll create ON/OFF switch examples that develop with pure CSS. It’s ON/OFF toggle switches and when users check/uncheck a checkbox to indicate an ON/OFF.

We founded a label, a checkbox input type, and fetch the boolean value after form submission to determine if the user has left the sector checked or unchecked. We’re all aware the default checkbox styling looks as if there's no style. But with the assistance of CSS, we will grow to be toggle ON/OFF button.

In order to make this solution CSS-only, we’re going to be using traditional <input type="checkbox"> elements but they’re going to be hidden through CSS. Our CSS will then make use of the: checked pseudo-class and the general sibling combinator (~) to dynamically apply either an “on” or “off” style to our switch.

Let’s start with the HTML. For this, we’re going to be wrapping everything inside an <label> element. This will allow us to click anywhere within the wrapper and it will toggle the state of our hidden checkbox.

CSS Toggle Switch Step:1

Add below code inside index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>ON-OFF Switch Button</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@500&display=swap" rel="stylesheet">
  </head>
  <body>
    <div class="switch-toggle">
          <div class="button-check" id="button-check">
            <input type="checkbox" class="checkbox">
            <span class="switch-btn"></span>
            <span class="layer"></span>
          </div>
    </div>
  </body>
</html>

CSS Toggle Switch Step:2

Then we need to add code for style.css which code I provide in the below screen.

* {
  padding: 0;
  margin: 0;
  outline: 0;
  font-family: 'IBM Plex Sans', sans-serif;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}
.switch-toggle {
  display: flex;
  height: 100%;
  align-items: center;
}
.switch-btn, .layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.button-check {
  position: relative;
  width: 90px;
  height: 46px;
  overflow: hidden;
  border-radius: 50px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  -o-border-radius: 50px;
}
.checkbox {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 3;
}

.switch-btn {
  z-index: 2;
}

.layer {
  width: 100%;
  background-color: #8cf7a0;
  transition: 0.3s ease all;
  z-index: 1;
}
#button-check .switch-btn:before, #button-check .switch-btn:after {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 30px;
  height: 20px;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  line-height: 1;
  padding: 9px 4px;
  background-color: #00921c;
  border-radius: 50%;
  transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
  display: flex;
  align-items: center;
  justify-content: center;
}

#button-check .switch-btn:before {
  content: 'ON';
}

#button-check .switch-btn:after {
  content: 'OFF';
}

#button-check .switch-btn:after {
  right: -50px;
  left: auto;
  background-color: #F44336;
}

#button-check .checkbox:checked + .switch-btn:before {
  left: -50px;
}

#button-check .checkbox:checked + .switch-btn:after {
  right: 4px;
}

#button-check .checkbox:checked ~ .layer {
  background-color: #fdd1d1;
}