Ajax Loader
×
HTML 
<a href="http://twitter.com/bloggingbolt" class="icon-button twitter"><i class="icon-twitter"></i><span></span></a>
1
<a href="http://twitter.com/bloggingbolt" class="icon-button twitter"><i class="icon-twitter"></i><span></span></a>
2
<a href="http://facebook.com/bloggingbolt" class="icon-button facebook"><i class="icon-facebook"></i><span></span></a>
3
<a href="http://plus.google.com" class="icon-button google-plus"><i class="icon-google-plus"></i><span></span></a>
 
CSS 
/* Wrapper */
1
/* Wrapper */
2
.icon-button {
3
  background-color: white;
4
  border-radius: 3.6rem;
5
  cursor: pointer;
6
  display: inline-block;
7
  font-size: 2.0rem;
8
  height: 3.6rem;
9
  line-height: 3.6rem;
10
  margin: 0 5px;
11
  position: relative;
12
  text-align: center;
13
  -webkit-user-select: none;
14
     -moz-user-select: none;
15
      -ms-user-select: none;
16
          user-select: none;
17
  width: 3.6rem;
18
}
19
 
20
/* Circle */
21
.icon-button span {
22
  border-radius: 0;
23
  display: block;
24
  height: 0;
25
  left: 50%;
26
  margin: 0;
27
  position: absolute;
28
  top: 50%;
29
  -webkit-transition: all 0.3s;
30
     -moz-transition: all 0.3s;
31
       -o-transition: all 0.3s;
32
          transition: all 0.3s;
33
  width: 0;
34
}
35
.icon-button:hover span {
36
  width: 3.6rem;
37
  height: 3.6rem;
38
  border-radius: 3.6rem;
39
  margin: -1.8rem;
40
}
41
.twitter span {
42
  background-color: #4099ff;
43
}
44
.facebook span {
45
  background-color: #3B5998;
46
}
47
.google-plus span {
48
  background-color: #db5a3c;
49
}
50
 
51
/* Icons */
52
.icon-button i {
53
  background: none;
54
  color: white;
55
  height: 3.6rem;
56
  left: 0;
57
  line-height: 3.6rem;
58
  position: absolute;
59
  top: 0;
60
  -webkit-transition: all 0.3s;
61
     -moz-transition: all 0.3s;
62
       -o-transition: all 0.3s;
63
          transition: all 0.3s;
64
  width: 3.6rem;
65
  z-index: 10;
66
}
67
.icon-button .icon-twitter {
68
  color: #4099ff;
69
}
70
.icon-button .icon-facebook {
71
  color: #3B5998;
72
}
73
.icon-button .icon-google-plus {
74
  color: #db5a3c;
75
}
76
.icon-button:hover .icon-twitter,
77
.icon-button:hover .icon-facebook,
78
.icon-button:hover .icon-google-plus {
79
  color: white;
80
}
 
JavaScript 
// Uses rem for size so go ahead and change the font-size of html and see the buttons get bigger (or smaller...) :)
1
// Uses rem for size so go ahead and change the font-size of html and see the buttons get bigger (or smaller...) :)
 

Untitled

CSSDeck G+