Create iOS Style Switch Toggle Button in Pure CSS

In this post I am going to share simple pure css based script to create iOS Style Switch Button. You can place this type of animated button on anywhere to change the status of product or any other place. The script written in purely in CSS3 transforms and transitions which creates iOS-style switch toggle button.

iOS Style Switch Toggle Button

HTML

It uses checkbox to create iOS Style Switch Toggle Button.

CSS

Now add CSS on page and convert simple html checkbox to iOS Style Switch Toggle Button.

label.switch {  
  text-align: left;
  width: 150px;
  height: calc(150px / 2);
  border-radius:60px;    
  background-color:#4ed164;
  display: inline-block;
  position: relative;
  cursor: pointer;
}
 
label.switch > span {
  display: block;
  width: 100%;
  height: 100%;
}
 
label.switch > input[type="checkbox"] {
  opacity: 0;
  position: absolute;
} 
 
label.switch > span:before, label.switch > span:after {
  content: "";
  cursor: pointer;
  position: absolute;
}
 
label.switch > input[type="checkbox"]:focus ~ span {
  box-shadow: 0 0 0 4px #43b556; 
}
 
label.switch > input[type="checkbox"]:checked:focus ~ span {
  box-shadow: 0 0 0 4px #fff;
}
 
label.switch > span {
  border-radius: 60px;    
}
 
label.switch > span:before {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-color: #f1f1f1;
  border-radius: 60px;
  transition: opacity .2s ease-out .1s, transform .2s ease-out .1s;
  transform: scale(1);
  opacity: 1;
}
 
label.switch > span:after{
  top: 50%;
  z-index: 3;
  transition: transform .4s cubic-bezier(0.44,-0.12, 0.07, 1.15);
  width: calc(150px / 2);
  height: calc(150px / 2);
  transform: translate3d(0, -50%, 0);
  background-color: #fff;
  border-radius: 100%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .3);  
}
 
label.switch > input[type="checkbox"]:checked ~ span:before {
  transform: scale(0);
  opacity: .7;
}
 
label.switch > input[type="checkbox"]:checked ~ span:after {
  transform: translate3d(100%, -50%, 0);
}

See live demo and download source code.

Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.

Leave a Reply

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

Top