DEV Community

loading...
Cover image for Realistic Red Switch (Pure CSS)

Realistic Red Switch (Pure CSS)

ykadosh profile image Yoav Kadosh Updated on ・1 min read

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)

pic
Editor guide
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
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
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
lukeshiru profile image
△ LUKE知る

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
sidchaudhary04 profile image
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...