DEV Community

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

Collapse
 
mborgeaud profile image
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.

knot

.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);
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
devggaurav profile image
Gaurav

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