A new toggle switch added to the collection: colorful.
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.
The design was inspired by Nick Buturishvili's Switch on Dribbble: https://dribbble.com/shots/2272690-Switch
Top comments (6)
The colour filling in from the opposite end feels a bit unintuitive, but maybe that's just me. Great design & execution though!
You mean something like this?
I like this quite a bit more too; however, I think both ov them are great.
Nice job with the CSS for this.
Yes, this feels much more natural for me
Nice work :)
It feels awesome.
I checked others.
This was the best.
Thanks! If you like that one, check the one that inspired it, created by Josh Dillon: codepen.io/jdillon/pen/PoLBVmV
That one uses SVG, which makes the animations smoother and nicer.