How I built my (mostly) CSS Light Switch Toggle
Last night I put this little light switch Pen together! I have a power strip under my desk with a switch like this one, and based it on that!
So, first of all, I probably should have done this with an HTML checkbox, and then I could have killed off the JavaScript part. I didn’t feel like dealing with the positioning and hiding of a checkbox (read: I was lazy), so I stuck with a button with a simple click listener. I did the HTML with Pug (read: I was lazy), so it was only a couple words overall in that panel!
Now, the juicy CSS part. This entire switch was basically all gradients and shadows. I based some of the colors on these Dribbble shots:
When I pick a color for a Pen, I use the color picker software Digital Color Meter on Mac! I admit I haven’t found a color picker like it on Windows, very open to suggestions on that. Anyway, with the colors I was picking, I had to make gradients with them. Now, I don’t really like to hand-write all the percentages in a given gradient (read: I am lazy), so I use this gradient generator tool to put them together. For this particular Pen, I was eyeballing a lot of it in this tool, and kind of re-dragging the color handles around until I was happy with them. Along with the actual background gradients, I had some border-image gradients in there for the edges of the switch when it had the “on” class toggled, and moved the background shadows ever so slightly with the class, too.
Also in the “on” class is some fun psuedo-element work! The first one you’ll see is, yet again, adding another gradient. It’s a very light radial gradient to make it glow a little bit when you turn the switch on. I added some low-opacity onto the overall element too to make it not too bright.
The next one was more challenging, and honestly it’s not very visible on large screens (I had a minor panic seeing it on my big monitor thinking I broke everything, realizing the resolution just made it look invisible… very annoying). It’s some very tiny polka dots in an attempt to make the switch look a little more textured. I used this Pen here as a reference for the polka dot pattern, and basically just kept switching around the colors and size until I was happy with it (…on my small monitor).
Besides that, the rest of this was just adding box-shadows for some depth! It was a simple Pen, but a fun little project.