Toggle Switch On / OFF Button in Pure CSS

In this tutorial we are going to share simple Toggle Switch On / OFF Button purely written in CSS. You can add this feature on your website in many phase where user need to choose yes/no options. You can simply place this awesome toggle based animated on/off action button which enhance your website overall experience and your website user will love it. we have also list some hand picked popular toggle switch buttons for you and you can choose any of them which best suite in your project.
Toggle Switch On / OFF Button in Pure CSS

HTML

Create a simple html container and add two input button one for “yes” and other for “no” action which will act like toggle switching.

<div class="container">
  <div id="group">
    <fieldset class="switch">
      <legend>Subscribe: </legend>
 
      <input id="yes" name="view" type="radio" checked>
      <label for="yes">Yes</label>
 
      <input id="no" name="view" type="radio">
      <label for="no">No</label>
 
      <span class="switch-button"></span>
    </fieldset>
  </div>
</div>


CSS

Finally add CSS on page to make above input text box act like tootle switching with on/off action which you can store in your database via ajax request.

 body {
  background-color: #d3a977;
  background: url(http://www.inkspilldesign.com/demo/wood-tile-background.jpg);
}
 
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
}
 
#group {
  position: relative;
  margin: 60px auto;
  padding: 20px 20px 23px;
  border: 1px dashed rgba(0, 0, 0, .5);
  background-image: linear-gradient(top, rgba(255, 255, 255, .1), rgba(0, 0, 0, .1));
  background-color: #555;
  width: 340px;
  border-radius: 5px;
  box-shadow: 0 0 0 3px #555, -2px 3px 0px 2px rgba(0, 0, 0, .6), 2px -2px 0px 2px rgba(255, 255, 255, .6), -5px 5px 20px 0px rgba(0, 0, 0, .6);
}
 
#group:after {
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  border-radius: 5px;
  border: 1px dashed #fff;
}
 
.switch {
  position: relative;
  border: 0;
  padding: 0;
  width: 300px;
  font-family: helvetica;
  font-weight: bold;
  font-size: 22px;
  color: #222;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .3);
}
 
.switch legend {
  float: left;
  width: 40%;
  padding: 7px 10% 3px 0;
  text-align: right;
}
 
.switch input {
  position: absolute;
  opacity: 0;
}
 
.switch legend:after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 0;
  width: 50%;
  height: 100%;
  padding: 2px;
  background-color: #222;
  border-radius: 3px;
  box-shadow: inset -1px 2px 5px rgba(0, 0, 0, .8), 0 1px 0 rgba(255, 255, 255, .2);
}
 
.switch label {
  position: relative;
  z-index: 2;
  float: left;
  width: 25%;
  margin-top: 2px;
  padding: 5px 0 3px 0;
  text-align: center;
  color: #64676b;
  text-shadow: 0 1px 0 #000;
  cursor: pointer;
  transition: color 0s ease .1s;
}
 
.switch input:checked + label {
  color: #2d592a;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}
 
.switch input:focus + label {
  outline: none;
}
 
.switch .switch-button {
  clear: both;
  position: absolute;
  top: -1px;
  left: 50%;
  z-index: 1;
  width: 25%;
  height: 100%;
  margin: 2px;
  background-color: #70c66b;
  background-image: linear-gradient(top, rgba(255, 255, 255, .2), rgba(0, 0, 0, 0));
  border-radius: 3px;
  border: 1px dashed rgba(0, 0, 0, .3);
  box-shadow: 0 0 0 3px #70c66b, -2px 3px 5px #000;
  transition: all .3s ease-out;
}
 
.switch .switch-button:after {
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  border-radius: 3px;
  border: 1px dashed #fff;
}
 
.switch input:last-of-type:checked ~ .switch-button {
  left: 75%;
}

See live demo and download source code.

DEMO

This awesome script developed by AndrewCreech, Visit their official codepen repository for more information and follow for future updates.

Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.