Follow us on - Dribbble | Twitter | Facebook

Animated Switch Button


Hello everyone! I’m having fun with CSS properties. In this tutorial, I focused on how to create elastic on off switch button.

How is it working?

Basic thing for the checkbox is which is either checked or unchecked. Instead of browser 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 separate styles”.

HTML Element

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


First, Set Switch button size, background-color and border-radius and hide the input check box..switch-rubber{
display: inline-block;
cursor: pointer;
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);
border-radius: 30px 0px 0px 30px;
border-radius: 0px 30px 30px 0px;
}Adding icons “Checked / Unchecked”.switch-rubber-left:before
background: url(“../images/cr_rnd.png”);
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 uncheckedinput[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