27 Check Interactions For Checkbox – ckdcss

Preview:

Description:

Just another CSS library that provides 27 awesome check interactions for checkboxes similar to the checkbox.css.

To apply check interactions to radio buttons, here is a CSS library called radiobox.css you might find useful.

Interactions Included:

1. Splash
2. Zoom
3. OMG
4. TV
5. Jump
6. Up
7. Yo
8. Inout
9. Roll
10. Rotate
11. Metal
12. Rubber
13. Boom
14. Jelly
15. Smokin
16. Rewind
17. Boing
18. Flush
19. Rollin
20. Tadà
21. Flag
22. Wave
23. Pulse
24. Vibration
25. Ghost
26. Flip
27. Pepe

See It In Action:

How to use it:

1. Install and download the package.

# NPM
$ npm install ckd-css --save

2. Import the ckd-css into your project.

import 'ckd-css/dist/pulse.css';

3. Or directly insert the stylesheet into your html document.

<!-- From Local -->
<link rel="stylesheet" href="./ckd.css" />
<!-- Or From CDN -->
<link rel="stylesheet" href="https://unpkg.com/ckd-css/dist/ckd.css" />

4. Add an animation class to your checkbox element using the data-ckd attribute:

<label>
  <input type="checkbox" data-ckd="splash"/> 
  Splash
</label>

5. Another example showing how to apply an interation to custom checkboxes.

<label for="CustomCheckbox">
  <span class="CustomCheckbox" role="checkbox" data-ckd="splash" id="CustomCheckbox" aria-checked="true">
    <input type="checkbox">
  </span>
  Input label
</label>