CSS3 Mobile Phone Switch button transition gradient

Css:

Div{width:100px;margin:0 Auto; }. OnOff{Display:Inline-block;position:relative;width:60px;Height:20px;Overflow:Hidden;Border-radius:10px;Border:1px solid #909090; }. OnOff Label{Display:Inline-block;position:relative;width:100px;Height:20px;Background-image:-webkit-linear-gradient (Top, #fe7e02, #fea651);cursor:Pointer; }. OnOff Label:before{content: "";Display:Inline-block;width:2px;Height:10px;position:Absolute; Left:22px;Margin-top:5px;Overflow:Hidden;background:#fff; }. OnOff Label:after{position:relative;Z-index:1;content: "";Display:Inline-block;Margin-left:39px;Margin-top:-1px;width:20px;Height:20px;Border-radius:10px;Border:1px solid #909090;Background-image:-webkit-linear-gradient (Top, #ddd, #fff); }. OnOff I{Display:Inline-block;position:Absolute;Z-index:0; Right:0;Top:0px;width:50px;Height:20px;Background-image:-webkit-linear-gradient (Top, #ddd, #fff); }. OnOff I:after{content: "";Display:Inline-block;width:8px;Height:8px;Margin-left:23px;Border-radius:5px;Border:1px solid #909090; }. OnOff Label{-webkit-transition:All . 5s Ease-out; }. Onoff:hover Label{Margin-left:-40px; }

Html:

<Div><spanclass= "OnOff"><label><I></I></label></span></Div>

：

CSS3 Mobile Phone Switch button transition gradient