Pure CSS3 for sliding switch effect

The implementation results are as follows:

HTML structure code:

<label class= "Ui-switch" > <input type= "checkbox" checked= "" > </label>

CSS code:

/* Form Switch style */ . ui-switch { Position:absolute; Font-size:. 16rem; Right:0.07rem; top:50%; Margin-top: -0.16rem; Width:. 7rem; Height:. 3rem; Line-height:. 3rem; } . Ui-switch Input { Width:. 7rem; Height:. 3rem; Position:absolute; top:0;left:0; Z-index:2; border:0; background:0 0; -webkit-appearance:none; outline:0 } . Ui-switch Input:before { Content: "; Width:. 68rem; Height:. 3rem; border:1px solid #dfdfdf; Background-color: #fdfdfd; Border-radius:. 2rem; Cursor:pointer; Display:inline-block; position:relative; Vertical-align:middle; -webkit-box-sizing:content-box; Box-sizing:content-box; Border-color: #dfdfdf; -webkit-box-shadow: #dfdfdf 0 0 0 0 inset; Box-shadow: #dfdfdf 0 0 0 0 inset; -webkit-transition:border. 4s,-webkit-box-shadow. 4s; Transition:border. 4s,box-shadow. 4s; -webkit-background-clip:content-box; Background-clip:content-box } . Ui-switch Input:checked:before { Border-color: #64bd63; -webkit-box-shadow: #64bd63 0 0 0 0.16rem inset; Box-shadow: #64bd63 0 0 0 0.16rem inset; Background-color: #64bd63; Transition:border. 4s,box-shadow. 4s,background-color 1.2s; -webkit-transition:border. 4s,-webkit-box-shadow. 4s,background-color 1.2s; Background-color: #64bd63 } . Ui-switch Input:checked:after { Left:. 4rem } . Ui-switch Input:after { Content: "; Width:.3rem; Height:. 3rem; Position:absolute; top:50%; left:0; -webkit-transform:translatey (-50%); border-radius:100%; Background-color: #fff; -webkit-box-shadow:0 0.01rem 0.03rem Rgba (0,0,0,.4); box-shadow:0 0.01rem 0.03rem Rgba (0,0,0,.4); -webkit-transition:left. 2s; Transition:left. 2s }

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Pure CSS3 for sliding switch effect