27 Check Interactions For Checkbox – ckdcss

Category: Animation , Form , Javascript | March 13, 2020
Author:equinusocio
Views Total:119 views
Official Page:Go to website
Last Update:March 13, 2020
License:Apache-2.0

Preview:

27 Check Interactions For Checkbox – ckdcss

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>

You Might Be Interested In:


Leave a Reply