3 Cool CSS3 check boxes checkbox animation effects

This is a very cool CSS3 check box checkbox for animation effect. This set of check box animation effects a total of 3 effects, they are on the basis of the native checkbox elements to beautify, when the user clicked the check box to create a very cool animation effect.

Online preview Source Download

How to useHTML Structure

The style of the normal HTML CheckBox control is very dull. In modern web design, we can use the CSS3 to set a more beautiful appearance and animation effects. Through the CSS @keyframe properties, we can create a variety of magic check box animation effects.

In the demo of these check box animations, the unordered list structure is used. Each list item has an <checkbox> element and an element <label> .

<ul>  <Li>      <inputtype= "checkbox"name= "Manager"ID= "Manager" />      <label for= "Manager">Project Manager</label>  </Li>  <Li>      <inputtype= "checkbox"name= "Webdesigner"ID= "Webdesigner" />      <label for= "Webdesigner">Web Designer</label>  </Li>  <Li>      <inputtype= "checkbox"name= "WebDev"ID= "WebDev" />      <label for= "WebDev">Website Technician</label>  </Li>  <Li>      <inputtype= "checkbox"name= "SEO"ID= "SEO" />      <label for= "SEO">Seo</label>  </Li>  <Li>      <inputtype= "checkbox"name= "Itstaff"ID= "Itstaff" />      <label for= "Itstaff">IT technician</label>  </Li>  <Li>      <inputtype= "checkbox"name= "CSR"ID= "CSR" />      <label for= "CSR">Customer Service Representative</label>  </Li></ul>             

CSS Styles

In CSS styles, the native checkbox is first hidden.

{    display: none;}        

The label relative positioning and some padding values are then set on the element. Then we need to use the label elements :before and :after pseudo-elements, because here to use the Font awesome fonts icon, so its font is set to FontAwesome .

/*Checkbox Icons*/label{position:relative;Padding-left:30px;font-size:30px;cursor:Pointer;Color:#fff;padding:16px 28px 0 0;}Label:before, Label:after{font-family:Fontawesome;font-size:50px;/*absolutely positioned*/position:Absolute;Top:0; Left:-49px; Right:10px;}

3 Cool CSS3 check boxes checkbox animation effects