Switch switch button for pure CSS3

Effect

< P >                                                  < label ><  class= "Mui-switch mui-switch-anim"  type= "checkbox"  checked  ></label></p>

. Mui-switch{width:60px;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:25px;Height:25px;position:Absolute;Top:2px; Left:5px;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:#ebebeb;/*box-shadow:0 1px 3px rgba (0, 0, 0, 0.4);*/}. mui-switch:checked{Border-color:#66dbc9;Box-shadow:#66dbc9 0 0 0 16px inset;Background-color:#66dbc9;}. Mui-switch:checked:before{ Left:30px;Border:None;}. 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:#66dbc9 0 0 0 16px inset;Background-color:#66dbc9;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;}

Switch switch button for pure CSS3