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

Collapse
 
lucasandre profile image
Lucas André

Awesome!!

Collapse
 
sidcraftscode profile image
sid

Wow 🤩

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