Style Your Own Checkbox Animation Effects with Checkbox.css

In a new post, we lonesome a fun animation library for custom radio buttons, powered by CSS.

That giveaway library was expelled by 720kb and fast saw a follow-up choice called Checkbox.css. This works in a identical way, solely it restyles and animates HTML checkboxes.

Checkbox.css tradition stylesheetCheckbox.css tradition stylesheet

This library comes as a apartment of libraries with three graphic purposes:

  1. Radiobox.css – tradition radio animations
  2. Checkbox.css – tradition checkbox animations
  3. Checked.css – styles animates existent comparison elements (radios checkboxes)

These are all grown by a same group and they work in a identical manner. But you’ll need to include any library individually if we wish to get a full effects.

Take a look during a Checkbox.css GitHub to see some of these facilities and how they work. By default, they rest on 2D transforms along with CSS transitions, depending on browser support.

None of these libraries come with JS fallback methods, so they unequivocally only work for CSS-powered animations. But, one discerning peek during a demo page should have we gay to supplement these animations to your page.

The routine couldn’t be easier and it requires little-to-no coding knowledge (although it’s always useful to have some).

Once a CSS stylesheet is on your page, only supplement a category to your checkbox with a format checkbox-x where a “x” represents whatever animation we want. For example, here’s a formula for a “jump” animation effect:

input type="checkbox" name="mycheckbox" id="checkid"
        class="checkbox-jump"

The best partial is how this library can work in and with a radio symbol format, too. we would really suggest a Checked.css library if we wish to animate existent comparison elements.

Checked.css animation libraryChecked.css animation library

Don’t let all these dependencies shock we off. Pretty most anyone can set adult a Checkbox.css library or any of a associated libraries, all from blemish with a small duplicate pasting.

And, if we have questions or suggestions for this container of submit animation libraries try messaging a creators through their site or on Twitter @720kb_.

Add Comment