Discussion on: Let's create a custom toggle switch using HTML and CSS.

[Matias Borgeaud]

Great tip!
I just did a small change to the CSS to give a transition effect to both the tick and the cross.

.toggle-thumb {
 ...
 overflow: hidden;
}
svg:nth-child(1) {
  position: relative;
  left: -26px;    
}
svg {
  transition: .4s all ease;
}
.checkbox:checked + .toggle-thumb > svg {
  transform: translateX(26px);
}

[Gaurav]

Hey! This looks amazing😍🤩 Thank u so much!