A new toggle switch component added to the collection. This time I was browsing online and saw an ad (for a VPN or something) that had this image of a switch. It looked interesting, so I took a screenshot for later and then build it.
You can find the code and live demo on CodePen: https://codepen.io/alvaromontoro/pen/myVjpyb
What it has
It's a single HTML element:
It uses a checkbox as a base element. By adding the role="switch" the browser identifies the checkbox as a toggle switch and, when it is activated, the states are on/off (switch) instead of checked/unchecked (checkbox).
It has a bunch of CSS (although not as much as one would expect). Many gradients and shadows, some transitions, a background-clip... Just the regular stuff.
What it doesn't have
It doesn't have any JavaScript, all the functionality is native to the browser (which may lead to tricky situations because a checkbox has an indeterminate state that a switch has not... but that's a different story).
It also doesn't have any images, it's all gradients and pseudo-elements. Although I must admit that the same could be achieved inlining some SVG. And it would look nicer, too. But that's also a different story.