Checkbox Design using only HTML & CSS

Hello readers, Today in this blog you'll learn how to create Custom Checkbox or Toggle Switch using only HTML & CSS. Earlier I have shared a blog on how to create Password Show or Hide Toggle using JavaScript and now it's time to create an On/Off Toggle Switch.

A checkbox, selection box, or tick box is a small interactive box that can be toggled by the user to show an affirmative or negative choice. And a toggle button lets the user change a setting between two states.

In this program (Custom Checkbox or Toggle Switch), on the webpage, there is a toggle switch and a text labeled as "Disabled". When you click on that toggle switch or checkbox, the toggle switch or checkbox is on, enabled, or checked and the text is also changed into "Enabled". When the toggle switch is on, the background color of the toggle and the color of the text is also changed.

You can also on/off the switch of the toggle by clicking on the label text and this is a pure CSS program, which means I used only HTML & CSS to create this toggle switch

CSS Code

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');

  *{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
html,body{
  display: grid;
  height: 100%;
  place-items: center;
  background: ;
}
.checkbox{
  height: 80px;
  width: 270px;
  padding: 20px;
  display: flex;
  background: #fff;
  align-items: center;
  border-radius: 5px;
  box-shadow: 5px 5px 30px rgba(0,0,0,.2);
  justify-content: space-between;
}
.checkbox input{
  outline: none;
  height: 40px;
  width: 90px;
  border-radius: 50px;
  -webkit-appearance: none;
  position: relative;
  background: #e6e6e6;
  box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  transition: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.checkbox input:checked{
  background: #664AFF;
}
.checkbox input:before{
  position: absolute;
  content: "";
  left: 0;
  height: 100%;
  width: 40px;
  background: linear-gradient(#fff,#f2f2f2,#e6e6e6,#d9d9d9);
  box-shadow: 0 2px 5px rgba(0,0,0,.2);
  border-radius: 50px;
  transform: scale(0.85);
  transition: left 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
input:checked:before{
  left: 50px;
}
.checkbox .text:before{
  content: "Disabled";
  font-size: 25px;
  font-weight: 500;
  color: #bfbfbf;
}
input:checked ~ .text:before{
  color: #664AFF;
  font-size: 27px;
  content: "Enabled";
}

HTML Code

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
<!DOCTYPE html>
<!-- Created By Mirulcoding - https://mirulcoding.blogspot.com/ -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <!-- Somehow I got an error, so I comment the title, just uncomment to show -->
  <title>Custom Toggle Button | Mirulcoding</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="checkbox">
      <input type="checkbox" id="click">
      <label for="click" class="text"></label>
    </div>
</body>
</html>

Checkbox Design using only HTML & CSS | Toggle Switch On/Off

Post a Comment

Post a Comment

Contact Form