CSS Lightbulb & Switch

👉 Try the live demo here!

Hey! This is a quick front-end project I put together to play around with CSS shapes, gradients, and box-shadows.

It’s exactly what it sounds like: a working light switch. When you click the switch, it toggles the "lights" on the page, adds a glowing effect to the bulb, and plays a little click sound effect.

What's inside?

No frameworks or libraries here. Just the basics:

• HTML for the structure of the bulb and switch.
• CSS for all the drawing (pseudo-elements are great for this) and the glowing shadow effects.
• Vanilla JavaScript just to listen for the click, toggle a CSS class on the body, and trigger the audio file.

Running it locally

If you want to poke around the code yourself, you don't need any build tools or local servers. Just clone the repo, and open index.html in your browser.

(Make sure to turn your volume up a bit for the click sound!)