29 Free CSS Toggle Switch Components 2026 ProofMatcher has 29 free CSS toggle switches — iOS-style, neon, material, and more. Zero JavaScript needed. iOS-Style Toggle <label class= "ios-toggle" > <input type= "checkbox" > <span class= "track" ></span> </label> Enter fullscreen mode Exit fullscreen mode .ios-toggle { position : relative ; width : 52px ; height : 28px ; display : inline-block ; } .ios-toggle input { display : none ; } .track { position : absolute ; inset : 0 ; background : #3a3a3a ; border-radius : 28px ; cursor : pointer ; transition : background .25s ; } .track ::before { content : '' ; position : absolute ; height : 22px ; width : 22px ; left : 3px ; top : 3px ; background : #fff ; border-radius : 50% ; transition : transform .25s ; box-shadow : 0 2px 6px rgba ( 0 , 0 , 0 , .3 ); } .ios-toggle input :checked + .track { background : #e53e3e ; } .ios-toggle input :checked + .track ::before { transform : translateX ( 24px ); } Enter fullscreen mode Exit fullscreen…