DEV Community

Cover image for Realistic Red Switch (Pure CSS)

Realistic Red Switch (Pure CSS)

Yoav Kadosh on March 15, 2021

This is my attempt at making a realistic switch using CSS only. I'm using multiple CSS techniques here, including gradients, 3D transformations, an...
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
 
skylersaville profile image
Skyler Saville

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

Collapse
 
maxart2501 profile image
Massimo Artizzu

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

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
 
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
 
sidcraftscode profile image
sid

Wow 🤩

Collapse
 
bgrand_ch profile image
Benjamin Grand

Amazing, congratulation!

Collapse
 
lucasandre profile image
Lucas André

Awesome!!

Collapse
 
littlegrapeguy profile image
Gautaman

Very Impressive!

Collapse
 
katieadamsdev profile image
Katie Adams

This is just ridiculously, jaw-droppingly amazing 😮

Collapse
 
ykadosh profile image
Yoav Kadosh

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