This weekend, I added a new animated toggle switch to the collection: Colorful. It was inspired by Nick Buturishvili's Switch on Dribbble. I really that design, so I tried to mimick it with a single HTML element and CSS.
I added some slight changes for convenience:
- Replaced the animation between cross and checkmark for a more modest transition (to make it easier to code)
- Darkened the turquoise colors a little bit so it provided enough contrast with the white from the icon (to make it more accessible)
- Switched the Off and On sides (so it was more consistent with the other toggle switches I created in the past)
Hopefully, those changes didn't break the beauty of the original design. Judge for yourself. Here is the source code and live demo on CodePen:
Some features:
- Single HTML element: no need for complex structures.
- No external images: all drawings and gradients are basic CSS.
- No JavaScript: the browser handles the component's state.
- Responsive: the toggle will adapt to the font size.
- Supports reduced motion: removes animations and transitions.
- High contrast mode support: adding transparent borders.
- Added color contrast: between icon and background.
- Printing styles: just in case :P
The transition includes some properties that are not so efficient to animate, such as background-position or left. But, considering the toggle switch is small, they shouldn't have a negative impact overall.
If you like this toggle, check out a collection of toggle switches I created using only a single HTML element (a checkbox input) and CSS.