round slider toggle switch checkbox visual change style body min height 200px draws the outer bubble slider position absolute cursor pointer top 0 left 0 right 0 bottom 0 background color ccc transition 4s border radius 34px draws the small inner bubble circle slider before position absolute content height 26px width 26px left 2px bottom 2px background color white transition 4s border radius 34px causes the smaller inner bubble to move left right when clicked or checked input checked slider before transform translateX 30px input checked slider background color 2196F3 input hover slider box shadow 2px 2px 4px 000000 style label style position relative width 60px height 30px display block input type checkbox checked style display none span class slider span label
2px background color white transition 4s border radius 34px causes the smaller inner bubble to move left right when clicked or checked input checked slider before transform translateX 30px input checked slider background color 2196F3 input hover slider box shadow 2px 2px 4px 000000 style label style position relative width 60px height 30px display block input type checkbox checked style display none span class slider span label