This is my attempt at making a realistic switch using CSS only. I'm using multiple CSS techniques here, including gradients, 3D transformations, animations, and transitions.
Making realistic 3D elements in CSS is kind of like making a very low-poly version of a high-poly model. In this example, I made the button out of 3 "polygons" (3 divs) that are all at 90 degrees from each other (creating like a square U shape).
Interested in a tutorial on how I made this? Let me know!
This pen is based on this beautiful Dribbble shot by Voicu Apostol https://dribbble.com/shots/14172039-3D-Red-Switch
Top comments (16)
I saw this on Twitter a few days ago and I was really impressed about the level of detail of this.
Congratulations! I'd really like if you are able to make a tutorial to make something like this, a lot can be learned from it.
I only discovered that my tweet is trending on Twitter after reading your comment! I had no idea... Thanks for the feedback!
Here you go :)
dev.to/ykadosh/how-i-made-this-rea...
Very cool!
Now do that using only a
<input type="checkbox">element :trollface:It’s so beautiful. I can’t stop clicking on it.
Seriously impressive!
Thanks!
With just
<input type="checkbox" checked>this is really impressive.This is just ridiculously, jaw-droppingly amazing 😮
Impressive work
Wow that's really amazing! Great job! If you'll ever write a post about the process of building it I'd be very interested in reading it :D
Amazing, congratulation!
Very Impressive!