Toggle: Colorful

Toggle: Colorful

Alvaro Montoro - Feb 24 -

- Dev Community

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

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .