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.
<label class="switch"> <input type="checkbox" checked> <span></span> </label>
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.
DEMO | DOWNLOAD
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.