DEV Community

Cover image for Toggle: Colorful
Alvaro Montoro
Alvaro Montoro

Posted on • Originally published at alvaromontoro.com

10 1 1

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

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (6)

Collapse
 
namingthingsishard profile image
Shwetha

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

Collapse
 
alvaromontoro profile image
Alvaro Montoro

You mean something like this?

Collapse
 
calinzbaenen profile image
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.

Collapse
 
namingthingsishard profile image
Shwetha

Yes, this feels much more natural for me

Collapse
 
anmolbaranwal profile image
Anmol Baranwal

Nice work :)

It feels awesome.
I checked others.

This was the best.
toggle

Collapse
 
alvaromontoro profile image
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.

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay