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
Latest comments (16)
Hi everyone, I just published a detailed tutorial on how I made this! Check it out: dev.to/ykadosh/how-i-made-this-rea...
With just
<input type="checkbox" checked>this is really impressive.This is just ridiculously, jaw-droppingly amazing 😮
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
Very cool!
Now do that using only a
<input type="checkbox">element :trollface:Amazing, congratulation!
Very Impressive!
Awesome!!
It’s so beautiful. I can’t stop clicking on it.
Impressive work