CSS toggle switches replace the default checkbox with a beautiful sliding switch. No JavaScript needed for the core behavior.

The HTML Structure

<label class= "toggle" > <input type= "checkbox" id= "dark-mode" > <span class= "toggle-track" ></span> <span class= "toggle-label" > Dark Mode </span> </label>

Enter fullscreen mode

Exit fullscreen mode

The Core CSS

.toggle input { opacity : 0 ; width : 0 ; height : 0 ; position : absolute ; }

.toggle-track { display : inline-block ; width : 52px ; height : 28px ; border-radius : 14px ; background : #333 ; position : relative ; cursor : pointer ; transition : background 0.3s ease ; }

.toggle-track ::before { content : '' ; position : absolute ; width : 22px ; height : 22px ; border-radius : 50% ; background : #fff ; left : 3px ; top : 3px ; transition : transform 0.3s cubic-bezier ( 0.34 , 1.56 , 0.64 , 1 ); }

input :checked + .toggle-track { background : #e53e3e ; } input :checked + .toggle-track ::before { transform : translateX ( 24px ); } input…