DEV Community

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

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.


.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
devggaurav profile image
Gaurav Author

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