🏖 I've been on vacation for almost 2 weeks and I think I only turned on my PC to write last week's post.... And so I will do this week!
😎 I focused on something "lighter" like CSS and I created a configurable & responsive 3D button using a mixture of box-shadows, isolation: isolate, :before and :after pseudo elements and a bit of math, without using additional elements but a button tag!
💪 Actually, I used SCSS harnessing the power of mixins to make it reusable and configurable. At the moment, you can decide the min/max/viewport based size and you can change the aspect ratio, depth, color and font size.
⚠️ This is a very first version and I'm sure the calculations can be simplified, but I'd say it's working decently 😎
⏱ You can see it in action in the Doomsday project demo which is a sort of countdown to the doomsday.
📰 I'll add the link to a Codepen project where you can find the SCSS code to play with it.
Top comments (0)