The effect of the switch sliding switch button implemented by CSS3

itself I do this UI is designed to support the mobile end of the page, and the WebKit is also exactly the support of the single tag input element is the use of pseudo class ( :before or :after ), so I did not do more support and optimization, I just want to keep the HTML as clean as possible, so no other elements to do simulation. If you want to use on the desktop application, or support other browsers, you can make a little change, anyway, I have not tested.

Today continue to share an iOS-style switch switch button, which looks very common, as shown in figure:

The main is used <input  type="checkbox"> to simulate the implementation of the specific HTML:

<label><input class= "Mui-switch" type= "checkbox" > Default unchecked </label>
<label><input class= "Mui-switch" type= "checkbox" checked> default Check </label>
<label><input class= "Mui-switch mui-switch-animbg" type= "checkbox" > Default unchecked, Simple background transition effect, Add MUI-SWITCH-ANIMBG class can be </label>
<label><input class= "Mui-switch mui-switch-animbg" type= "checkbox" checked> default Check </label>
<label><input class= "Mui-switch mui-switch-anim" type= "checkbox" > Default unchecked, Transition effect, plus mui-switch-anim
Class can be </label>
<label><input class= "Mui-switch mui-switch-anim" type= "checkbox" checked> default Check </label>
In the actual use later added two transition effect, add MUI-SWITCH-ANIMBG and Mui-switch-anim respectively, the concrete effect view the following demo page.

CSS code (SCSS exported, typography a little strange):

. mui-switch {
width:52px;
height:31px;
position:relative;
border:1px solid #dfdfdf;
Background-color: #fdfdfd;
Box-shadow: #dfdfdf 0 0 0 0 inset;
border-radius:20px;
border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-left-radius:20px;
border-bottom-right-radius:20px;
Background-clip:content-box;
Display:inline-block;
-webkit-appearance:none;
User-select:none;
Outline:none; }
. mui-switch:before {
Content: ';
width:29px;
height:29px;
Position:absolute;
top:0px;
left:0;
border-radius:20px;
border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-left-radius:20px;
border-bottom-right-radius:20px;
Background-color: #fff;
box-shadow:0 1px 3px rgba (0, 0, 0, 0.4); }
. mui-switch:checked {
Border-color: #64bd63;
Box-shadow: #64bd63 0 0 0 16px inset;
Background-color: #64bd63; }
. mui-switch:checked:before {
left:21px; }
. MUI-SWITCH.MUI-SWITCH-ANIMBG {
Transition:background-color ease 0.4s; }
. mui-switch.mui-switch-animbg:before {
Transition:left 0.3s; }
. mui-switch.mui-switch-animbg:checked {
Box-shadow: #dfdfdf 0 0 0 0 inset;
Background-color: #64bd63;
Transition:border-color 0.4s, background-color ease 0.4s; }
. mui-switch.mui-switch-animbg:checked:before {
Transition:left 0.3s; }
. Mui-switch.mui-switch-anim {
Transition:border cubic-bezier (0, 0, 0, 1) 0.4s, Box-shadow cubic-bezier (0, 0, 0, 1) 0.4s; }
. mui-switch.mui-switch-anim:before {
Transition:left 0.3s; }
. mui-switch.mui-switch-anim:checked {
Box-shadow: #64bd63 0 0 0 16px inset;
Background-color: #64bd63;
Transition:border ease 0.4s, Box-shadow ease 0.4s, background-color ease 1.2s; }
. mui-switch.mui-switch-anim:checked:before {
Transition:left 0.3s; }

/*# Sourcemappingurl=mui-switch.css.map * *
SCSS Code:

@mixin Borderradius ($radius: 20px) {
Border-radius: $radius;
Border-top-left-radius: $radius;
Border-top-right-radius: $radius;
Border-bottom-left-radius: $radius;
Border-bottom-right-radius: $radius;
}

$duration:. 4s;
$checkedColor: #64bd63;
. mui-switch {
width:52px;
height:31px;
position:relative;
border:1px solid #dfdfdf;
Background-color: #fdfdfd;
Box-shadow: #dfdfdf 0 0 0 0 inset;
@include Borderradius ();
Background-clip:content-box;
Display:inline-block;
-webkit-appearance:none;
User-select:none;
Outline:none;
&:before {
Content: ';
width:29px;
height:29px;
Position:absolute;
top:0px;
left:0;
@include Borderradius ();
Background-color: #fff;
box-shadow:0 1px 3px rgba (0, 0, 0, 0.4);
}
&:checked {
Border-color: $checkedColor;
Box-shadow: $checkedColor 0 0 0 16px inset;
Background-color: $checkedColor;
&:before {
left:21px;
}
}
&AMP;.MUI-SWITCH-ANIMBG {
Transition:background-color ease $duration;
&:before {
Transition:left 0.3s;
}
&:checked {
Box-shadow: #dfdfdf 0 0 0 0 inset;
Background-color: $checkedColor;
Transition:border-color $duration, background-color ease $duration;
&:before {
Transition:left 0.3s;
}
}

}
&.mui-switch-anim {
Transition:border cubic-bezier (0, 0, 0, 1) $duration, Box-shadow cubic-bezier (0, 0, 0, 1) $duration;
&:before {
Transition:left 0.3s;
}
&:checked {
Box-shadow: $checkedColor 0 0 0 16px inset;
Background-color: $checkedColor;
Transition:border ease $duration, Box-shadow ease $duration, background-color ease $duration *3;
&:before {
Transition:left 0.3s;
}
}

}
}
Find problems welcome Weibo on the @ Fools Dock, with screenshots, models, browser version, etc., Grateful!