DEV Community

Cover image for Realistic Red Switch (Pure CSS)
Yoav Kadosh
Yoav Kadosh

Posted on • Edited on

Realistic Red Switch (Pure CSS)

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)

Collapse
 
d4vsanchez profile image
David Sánchez

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.

Collapse
 
ykadosh profile image
Yoav Kadosh

I only discovered that my tweet is trending on Twitter after reading your comment! I had no idea... Thanks for the feedback!

Collapse
 
ykadosh profile image
Yoav Kadosh
Collapse
 
maxart2501 profile image
Massimo Artizzu

Very cool!
Now do that using only a <input type="checkbox"> element :trollface:

Collapse
 
skylersaville profile image
Skyler Saville

It’s so beautiful. I can’t stop clicking on it.

Collapse
 
deadwisdom profile image
Brantley Harris

Seriously impressive!

Collapse
 
ykadosh profile image
Yoav Kadosh

Thanks!

Collapse
 
eunit99 profile image
Emmanuel Uchenna

With just <input type="checkbox" checked> this is really impressive.

Collapse
 
katieadamsdev profile image
Katie Adams

This is just ridiculously, jaw-droppingly amazing 😮

Collapse
 
ra1nbow1 profile image
Matvey Romanov

Impressive work

Collapse
 
omril321 profile image
Omri Lavi • Edited

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

Collapse
 
bgrand_ch profile image
Benjamin Grand

Amazing, congratulation!

Collapse
 
littlegrapeguy profile image
Gautaman

Very Impressive!