Ajax Loader
HTML 
<h1>Animated checkboxes using iconfonts</h1>
1
<h1>Animated checkboxes using iconfonts</h1>
2
 
3
<!-- A list of checkboxes -->
4
<ul>
5
  <li>
6
    <input type="checkbox" name="one" id="one" />
7
    <label for="one">Create checkbox</label>
8
  </li>
9
  <li>
10
    <input type="checkbox" name="two" id="two" />
11
    <label for="two">Assign label</label>
12
  </li>
13
  <li>
14
    <input type="checkbox" name="three" id="three" />
15
    <label for="three">Import iconfont</label>
16
  </li>
17
  <li>
18
    <input type="checkbox" name="four" id="four" />
19
    <label for="four">Iconify label pseudo elements</label>
20
  </li>
21
  <li>
22
    <input type="checkbox" name="five" id="five" />
23
    <label for="five">Animate icon widths</label>
24
  </li>
25
  <li>
26
    <input type="checkbox" name="six" id="six" />
27
    <label for="six">Color the icons</label>
28
  </li>
29
</ul>
30
<a href="http://thecodeplayer.com/walkthrough/custom-animated-checkbox-inputs-using-css-iconfonts">Source: TheCodePlayer</a>
 
CSS 
/*We will import 2 fonts*/
1
/*We will import 2 fonts*/
2
/*fontawesome iconfont*/
3
@import url(http://thecodeplayer.com/uploads/fonts/fontawesome/css/font-awesome.min.css);
4
/*Montserrat for the text*/
5
@import url(http://fonts.googleapis.com/css?family=Montserrat);
6
 
7
/*basic reset*/
8
* {margin: 0; padding: 0;}
9
 
10
body {
11
  font-family: montserrat;
12
  background: url('http://thecodeplayer.com/uploads/media/gpp.png');
13
  padding-top: 100px;
14
  color: #333;
15
}
16
 
17
h1 {
18
  font-size: 16px;
19
  padding: 15px;
20
  text-align: center;
21
}
22
 
23
ul {
24
  width: 290px;
25
  margin: 0 auto;
26
}
27
ul li {
28
  list-style-type: none;
29
  padding: 10px;
30
}
31
 
32
/*Adding custom checkbox icons*/
33
label {
34
  position: relative;
35
  padding-left: 30px;
36
  font-size: 14px;
37
  cursor: pointer;
38
}
39
label:before, label:after {
40
  font-family: FontAwesome;
41
  font-size: 21px;
42
  /*absolutely positioned*/
43
  position: absolute; top: 0; left: 0;
44
}
45
label:before {
46
  content: '\f096'; /*unchecked*/
47
}
48
label:after {
49
  content: '\f046'; /*checked*/
50
  /*checked icon will be hidden by default by using 0 max-width and overflow hidden*/
51
  max-width: 0;
52
  overflow: hidden;
53
  opacity: 0.5;
54
  /*CSS3 transitions for animated effect*/
55
  transition: all 0.35s;
56
}
57
 
58
/*hiding the original checkboxes*/
59
input[type="checkbox"] {
60
  display: none;
61
}
62
/*when the user checks the checkbox the checked icon will animate in*/
63
input[type="checkbox"]:checked + label:after {
64
  max-width: 25px; /*an arbitratry number more than the icon's width*/
65
  opacity: 1; /*for fade in effect*/
66
}
67
 
68
/*adding some colors for fun*/
69
#one+label:before, #one+label:after {color: hsl(0, 45%, 40%);}
70
#two+label:before, #two+label:after {color: hsl(60, 45%, 40%);}
71
#three+label:before, #three+label:after {color: hsl(120, 45%, 40%);}
72
#four+label:before, #four+label:after {color: hsl(180, 45%, 40%);}
73
#five+label:before, #five+label:after {color: hsl(240, 45%, 40%);}
74
#six+label:before, #six+label:after {color: hsl(300, 45%, 40%);}
 

Custom animated checkbox inputs using CSS and iconfonts

CSSDeck G+