Toggle: Colorful

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

Comments

[Shwetha]

The colour filling in from the opposite end feels a bit unintuitive, but maybe that's just me. Great design & execution though!

[Alvaro Montoro]

You mean something like this?

[Calin Baenen]

I like this quite a bit more too; however, I think both ov them are great.

Nice job with the CSS for this.

[Shwetha]

Yes, this feels much more natural for me

[Anmol Baranwal]

Nice work :)

It feels awesome.
I checked others.

This was the best.

[Alvaro Montoro]

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.