CSS---switch switch

Html:

<label><inputclass= "Mui-switch"type= "checkbox">Not selected by default</label><label><inputclass= "Mui-switch"type= "checkbox"checked>Selected by default</label><label><inputclass= "Mui-switch MUI-SWITCH-ANIMBG"type= "checkbox">Default unchecked, simple background transition effect, add MUI-SWITCH-ANIMBG class can</label><label><inputclass= "Mui-switch MUI-SWITCH-ANIMBG"type= "checkbox"checked>Selected by default</label><label><inputclass= "Mui-switch Mui-switch-anim"type= "checkbox">default unchecked, transition effect, add Mui-switch-anim class to</label><label><inputclass= "Mui-switch Mui-switch-anim"type= "checkbox"checked>Selected by default</label>

Css:

. 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; }

Original path: http://www.css88.com/archives/5693

CSS---switch switch