DEV Community

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

Posted on • Updated 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

Discussion (17)

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 Author

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 Author
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 Author

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 on

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
lukeshiru profile image
Luke Shiru

I genuinely love it. Great work 💖

Collapse
bgrand_ch profile image
Benjamin Grand

Amazing, congratulation!

Collapse
littlegrapeguy profile image
Gautaman

Very Impressive!

Collapse
lucasandre profile image
Lucas André

Awesome!!

Collapse
sidcraftscode profile image
Siddharth Chaudhary

Wow 🤩

Collapse
ykadosh profile image
Yoav Kadosh Author

Hi everyone, I just published a detailed tutorial on how I made this! Check it out: dev.to/ykadosh/how-i-made-this-rea...