HTML & CSS parkour

Input / Radio button with fireworks

I transformed inspirational `Card Theme – Switch` by @Jan Hoffmann into the working prototype thanks to HTML/CSS and javascript.

Micro-Interactions in the form

Checkbox and radio input in the form interacts with a mouse click and shows a fancy SVG animation that's easy to implement.

Implementation

To add this snippet to your website, add a [blink] attribute to any checkbox or radio input and let the magic happen :) Don't forget to include .js and .css files or copy them to your code. It's pretty simple.

<input blink name="student" type="checkbox" value="Student">
<input blink name="student" type="radio" value="Student">

Code here:

https://github.com/milangladis/sketch-checkbox

Loading Wave

This loader was created as an unlimited loader for the 3D rendering process in Vectary. The wave loader was created in pure HTML & CSS.

Enjoy the fully functional implementation on the CodePen: