I’m not too sure how I stumbled into this one. But something led me to this tweet:

Has anyone done this directional lighting cursor interaction with CSS? pic.twitter.com/zLL7Sk6kW5

— Jed Bridges (@JedBridges) July 1, 2020

And, to me, that’s a challenge.

The button design is neat. But I didn’t want to do a direct copy. Instead, we decided to make a “Twitter” button. The idea is that we create an almost transparent button with a social icon on it. And then that social icon casts a shadow below. Moving our mouse across the button shines a light over it. Pressing the button pushes it onto the surface. Here’s the final result:

Directional Lighting 3D CSS Twitter Button