The CSS code is as follows
. al-toggle-button{Appearance:none;-webkit-appearance:none;position:relative;Width52px;Height32px;Background#dfdfdf;Border-radius:16px;Border1px solid#dfdfdf;Outline0;Box-sizing:border-box; }. Al-toggle-button: checked{Border-color:#04be02;Background-color:#04be02; }. Al-toggle-button: Before,. Al-toggle-button: after{Content" ";Position:absolute;Top0;Left0;Height30px;Border-radius:15px;Transition:transform0.3s;Transition:-webkit-transform0.3s;Transition:transform0.3s,-webkit-transform0.3s;-webkit-transition:-webkit-transform0.3s; }. Al-toggle-button: before{Width50px;Background-color:#fdfdfd; }. Al-toggle-button: after{Width30px;background-color:white; box-shadow: 0 1px 3px rgba (0, 0, 0, 0.4);} .al-toggle-button:checked:before{transform: scale (0); Span class= "Hljs-attribute" >-webkit-transform: scale (0);} .al-toggle-button:checked:after{transform: translateX ( 20px); -webkit-transform: translatex (20px);}
Referenced in HTML
type="checkbox" class="al-toggle-button">
~~
Switch button for CSS imitation iOS