DEV Community


Sketchy Pseudo-3D Switch Checkbox

takaneichinose profile image Takane Ichinose ・1 min read

VueJS component for switch checkbox.

Designed to look like a hand-sketched flat-style ui element, a little bit 3d and animations (or should I say transition).

I just used the "+" selector for CSS to do the active and inactive state of the button.

I just used the VueJS for the component, so that I only need to call the "switch" tag.

Although I only put the name as the attribute. I think, I also need to put the event attributes.

To see the technique how I did the active state in CSS, please refer to the link below, and scroll down to "Solution number 3".

Styling Checkbox


Editor guide