Author: | NazarKalytiuk |
---|---|
Views Total: | 2,259 views |
Official Page: | Go to website |
Last Update: | March 18, 2016 |
License: | MIT |
Preview:

Description:
A pure CSS / CSS3 solution used to create animated checkboxes following the Google Material Design pattern.
How to use it:
Wrap the checkbox into a label element:
<label> <input type="checkbox"> <span>material checkbox</span> </label>
The core CSS / CSS3 rules to style and animate the checkbox on toggle.
label { margin: 2rem; position: relative; display: flex; align-items: center; flex-wrap: wrap; line-height: 1rem; height: 1rem; background: inherit; } input { background: tra; position: relative; cursor: pointer; width: 1.2rem; height: 1.2rem; margin-right: .4rem; background: inherit; } input:before { content: ""; position: absolute; width: 1.2rem; height: 1.2rem; background: inherit; cursor: pointer; } input:after { content: ""; transition: .4s ease-in-out; position: absolute; z-index: 1; width: 1rem; height: 1rem; border: .1rem solid rgba(200, 200, 200, .3); } input:checked:after { transform: rotate(-45deg); height: .5rem; border-color: #43A047; border-top-color: transparent; border-right-color: transparent; }