Ajax Loader
HTML 
<!--I am not a professional, so I would like to hear what you think about all my code. Would like to hear the critics and advises :)-->
1
<!--I am not a professional, so I would like to hear what you think about all my code. Would like to hear the critics and advises :)-->
2
 
3
<!--Click on the text in button to see it's color changes ;) I know, it's simple -->
4
 
5
<h1>Flat Social Buttons in CSS3</h1>
6
 
7
<div class="container">
8
  <div class="fb-icon-bg"></div>
9
    <div class="fb-bg"></div>
10
  <div class="twi-icon-bg"></div>
11
    <div class="twi-bg"></div>
12
  <div class="g-icon-bg"></div>
13
    <div class="g-bg"></div>
14
</div>
15
16
<h3>Inspiration from <a href="http://www.freebiesgallery.com/flat-social-buttons/">freebiesgallery</a>
17
 
18
  <br><br>
19
  Made by <a href="http://twitter.com/Paul_Trinko">@pollyglot</a>
20
</h3>
21
 
 
CSS 
/* Taking font for text in buttons */
1
/* Taking font for text in buttons */
2
@import url(http://fonts.googleapis.com/css?family=Oswald);
3
 
4
body {
5
  background: #c8dfeb;
6
  font-size: 14px;
7
}
8
 
9
/* Title */
10
h1 {
11
  color: #e74c3c;
12
  font-family: 'Roboto Condensed', sans-serif;
13
  font-weight: normal;
14
  margin-top: 50px;
15
  position: relative;
16
  text-align: center;
17
  width: 100%;
18
}
19
 
20
/* Text in footer */
21
h3 {
22
  color: #2c3e50;
23
  font-family: 'Roboto Condensed', sans-serif;
24
  font-style: normal;
25
  font-weight: bold;
26
  margin-top: 400px;
27
  position: relative;
28
  text-align: center;
29
  width: 100%;
30
}
31
 
32
/* Link styles */
33
a, a:visited, a:hover {
34
  color: #e74c3c;
35
  text-decoration: none;
36
}
37
 
38
a:hover {
39
  color: #a05772;
40
}
41
 
42
/* Styles for buttons container */
43
.container {
44
  left: 50%;
45
  margin: -86px 0 0 -103px;
46
  position: absolute;
47
  top: 50%;
48
}
49
 
50
/* Facebook */
51
.fb-icon-bg {
52
  background: #354f88;
53
  height: 37px;
54
  margin: 0 0 -37px 0;
55
  width: 41px;
56
}
57
 
58
.fb-icon-bg:after {
59
  content: url(https://dl.dropboxusercontent.com/u/54149043/CssDeck/fb-icon.png);
60
  display: block;
61
  padding: 9px 10px 5px 15px;
62
}
63
 
64
.fb-bg {
65
  background: #3b5998;
66
  display: block;
67
  height: 37px;
68
  margin: 0 0 30px 41px;
69
  width: 166px;
70
}
71
 
72
.fb-bg:after {
73
  color: #fff;
74
  content: "sign in with facebook";
75
  font-family: 'Oswald', sans-serif;
76
  height: 37px;
77
  left: 8%;
78
  position: relative;
79
  text-transform: uppercase;
80
  top: 22%;
81
  width: 41px;
82
}
83
 
84
.fb-bg:hover{
85
  cursor: pointer;
86
}
87
 
88
.fb-bg:active{
89
  background: #354f88;
90
}
91
 
92
/* Twitter */
93
.twi-icon-bg:after {
94
  content: url(https://dl.dropboxusercontent.com/u/54149043/CssDeck/twi-icon.png);
95
  display: block;
96
  padding: 11px 10px 6px 11px;
97
}
98
 
99
.twi-icon-bg {
100
  background: #40a2d1;
101
  height: 37px;
102
  margin: 0 0 -37px 0;
103
  width: 41px;
104
}
105
 
106
.twi-bg {
107
  background: #45b0e3;
108
  height: 37px;
109
  margin: 0 0 30px 41px;
110
  width: 166px;
111
}
112
113
.twi-bg:after {
114
  color: #fff;
115
  content: "sign in with twitter";
116
  font-family: 'Oswald', sans-serif;
117
  height: 37px;
118
  left: 11%;
119
  position: relative;
120
  text-transform: uppercase;
121
  top: 22%;
122
  width: 41px;
123
}
124
 
125
.twi-bg:hover {
126
  cursor: pointer;
127
}
128
 
129
.twi-bg:active {
130
  background: #40a2d1;
131
}
132
 
133
/* Google+ */
134
.g-icon-bg:after {
135
  content: url(https://dl.dropboxusercontent.com/u/54149043/CssDeck/g-icon.png);
136
  display: block;
137
  padding: 11px 10px 6px 13px;
138
}
139
 
140
.g-icon-bg {
141
  background: #ce3e26;
142
  height: 37px;
143
  margin: 0 0 -37px 0;
144
  width: 41px;
145
}
146
147
.g-bg {
148
  background: #de4c34;
149
  height: 37px;
150
  margin-left: 41px;
151
  width: 166px;
152
}
153
154
.g-bg:after {
155
  color: #fff;
156
  content: "sign in with google+";
157
  font-family: 'Oswald', sans-serif;
158
  height: 37px;
159
  left: 10%;
160
  position: relative;
161
  text-transform: uppercase;
162
  top: 22%;
163
  width: 41px;
164
}
165
 
166
.g-bg:hover {
167
  cursor: pointer;
168
}
169
 
170
.g-bg:active {
171
  background: #ce3e26;
172
}
 

Flat Social Buttons in CSS3

CSSDeck G+