Follow us on - Dribbble | Twitter | Facebook

Animated Switch Button

animated-checkbox

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.

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 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