Awesome toggle switch buttons using css3

Today I create awesome toggle switch buttons using css3. Basically toggle buttons is use for display data in switch format (display one value at a time in two value) like Yes/No, True/False, On/Off etc or as per the your requirement. Many of the websites you find toggle switch buttons using jQuery or javascript and bootstrap is also use jQuery for switch buttons. But it is possible to create with css3 only, below you see code of switch buttons using css3.

toggle switch button

Firstly, add HTML in your web page –

<label class="switch-btn">
   <input class="checked-switch" type="checkbox" />
   <span class="text-switch" data-yes="yes" data-no="no"></span>
   <span class="toggle-btn"></span>
</label>

Than, add css in your css –

.switch-btn {
  position: relative; 
  display: block; 
  vertical-align: top; 
  width: 80px; 
  height: 30px; 
  border-radius: 18px; 
  cursor: pointer;
}
.checked-switch {
  position: absolute; 
  top: 0; 
  left: 0; 
  opacity: 0;
}
.text-switch {
  background-color: #ed5b49; 
  border: 1px solid #d2402e; 
  border-radius: inherit; 
  color: #fff; 
  display: block; 
  font-size: 15px; 
  height: inherit; 
  position: relative; 
  text-transform: uppercase;
}
.text-switch:before, 
.text-switch:after {
  position: absolute; 
  top: 50%; 
  margin-top: -.5em; 
  line-height: 1; 
  -webkit-transition: inherit; 
  -moz-transition: inherit; 
  -o-transition: inherit; 
  transition: inherit;
}
.text-switch:before {
  content: attr(data-no); 
  right: 11px;
}
.text-switch:after {
  content: attr(data-yes); 
  left: 11px; 
  color: #FFFFFF; 
  opacity: 0;
}
.checked-switch:checked ~ .text-switch {
  background-color: #00af2c; 
  border: 1px solid #068506;
}
.checked-switch:checked ~ .text-switch:before {
  opacity: 0;
}
.checked-switch:checked ~ .text-switch:after {
  opacity: 1;
}
.toggle-btn {
  background: linear-gradient(#eee, #fafafa); 
  border-radius: 100%; 
  height: 28px; 
  left: 1px; 
  position: absolute; 
  top: 1px; 
  width: 28px;
}
.toggle-btn::before {
  color: #aaaaaa; content: "|||"; 
  display: inline-block; 
  font-size: 12px; 
  letter-spacing: -2px; 
  padding: 4px 0; 
  vertical-align: middle;
}
.checked-switch:checked ~ .toggle-btn {
  left: 51px;
}
 .text-switch, .toggle-btn {
  transition: All 0.3s ease; 
  -webkit-transition: All 0.3s ease; 
  -moz-transition: All 0.3s ease;
  -o-transition: All 0.3s ease;
}

See more demo on click demo link –

Add Comment

Required fields are marked *. Your email address will not be published.