DEV Community

Takane Ichinose
Takane Ichinose

Posted on

CSS Only 3D'ish Switch

Pure CSS implementation of a switch (styled checkbox).

There is no any Javascript codes in this pen.

I just put too many box-shadows to create the 3D look of this switch.

The background of this switch supposed to blur its backdrop using backdrop-filter CSS attribute.

The animation of the switch is made simple, and fast (128ms).

The size of this checkbox may be changed by changing the font-size of its parent element.

Discussion (0)