Animated Switch Button

Hello everyone! I’m having fun with CSS properties. In this tutorial, I focused on how to create elastic switch button, I’ll show you how to create button switches with CSS and elastic effect using Jquery, Ready for it?

 

 

How it is working?

Basic thing for checbox is which is either checked or unchecked. Instead of broser default checkbox, We can customize(ie. checkbox hack).
The checkbox hack allows us to have a toggle handler in pure CSS using :checked pseudo-selector, and a sibling selector (~ or +). Basically, say “if the checkbox is checked, then the following X element have seperate styles”.

HTML Element

 

HTML Elemetns used to create switch.
The input doesn’t need anything except checkbox type.

 

CSS

First, Set Switch button size, background-color and border-radius and hide the input check box..switch-rubber{
display: inline-block;
cursor: pointer;
}
.switch-cb
{
display: none;
}.switch-rubber-left, .switch-rubber-right
{
width: 40px;
overflow: hidden;
background: #d1e2ef;
padding: 10px;
display: inline-block;
position: relative;
box-shadow: inset 3px 3px 7px -3px rgba(0,0,0,0.2);
}.switch-rubber-left
{
border-radius: 30px 0px 0px 30px;
}.switch-rubber-right
{
border-radius: 0px 30px 30px 0px;
}

Adding icons “Checked / Unchecked”

.switch-rubber-left:before
{
background: url(“../images/cr_rnd.png”);
}

.switch-rubber-right:before
{
background: url(“../images/er_rnd.png”);
}
Adding Width / height / Transition to icons

.switch-rubber-right:before, .switch-rubber-left:before
{
content: “”;
width: 30px;
height: 30px;
display: inline-block;
background-size: 30px;
background-repeat: no-repeat;
transition: 0.3s all cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

If checkbox checked (:checked)

input[type=”checkbox”].switch-cb:checked + .switch-rubber-left:before
{
transform: translateX(0px);
}
input[type=”checkbox”].switch-cb:checked + .switch-rubber-left + .switch-rubber-right:before
{
transform: translateX(-70px);
}

If checkbox is unchecked

input[type=”checkbox”].switch-cb + .switch-rubber-left:before
{
transform: translateX(70px);
}
input[type=”checkbox”].switch-cb + .switch-rubber-left + .switch-rubber-right:before
{
transform: translateX(10px);
}

 

Thank you for reading this tutorial, and if you have any question or related work to show, please do. 🙂

You may also like