Ajax Loader
HTML 
<link href='http://fonts.googleapis.com/css?family=Montserrat|Sigmar+One' rel='stylesheet' type='text/css'>
1
<link href='http://fonts.googleapis.com/css?family=Montserrat|Sigmar+One' rel='stylesheet' type='text/css'>
2
<h1> collection of button design</h1>
3
<div class="one">
4
  <a href="#">button</a>
5
  <a href="#">button</a>
6
</div>
7
<div class="two">
8
  <a href="#">button</a>
9
  <a href="#">button</a>
10
</div>
11
<div class="three">
12
  <a href="#">button</a>
13
  <a href="#">button</a>
14
</div>
15
<div class="four">
16
  <a href="#">button</a>
17
  <a href="#">button</a>
18
</div>
19
<div class="five">
20
  <a href="#">button</a>
21
  <a href="#">button</a>
22
</div>
23
<div class="six">
24
  <a href="#">button</a>
25
  <a href="#">button</a>
26
</div>
27
<div class="seven">
28
  <a href="#">button</a>
29
  <a href="#">button</a>
30
</div>
31
<div class="eight">
32
  <a href="#">button</a>
33
  <a href="#">button</a>
34
</div>
35
<div class="nine">
36
  <a href="#">button</a>
37
  <a href="#">button</a>
38
</div>
39
<div class="ten">
40
  <a href="#"><span>&#8594;</span>button<span>&#8592;</span></a>
41
</div>
42
<h2>The END!</h2>
 
CSS 
body {
1
body {
2
  margin: 0;
3
}
4
h1, h2 {
5
  text-align: center;
6
  background: #E7E5DD;
7
  margin: 0;
8
  color: #6C6692;
9
  font-family: 'Sigmar One', cursive;
10
  line-height: 60px;
11
}
12
div {
13
  padding: 20px;
14
  text-align: center;
15
}
16
a {
17
  display: inline-block;
18
  text-decoration: none;
19
  text-transform: uppercase;
20
  letter-spacing: 1px;
21
  margin: 15px 25px;
22
  padding: 15px 20px;
23
  font-size: 20px;
24
  font-weight: bold;
25
  font-family: 'Montserrat', sans-serif;
26
  -webkit-transition: 0.4s ease-in-out;
27
  -o-transition: 0.4s ease-in-out;
28
  transition: 0.4s ease-in-out;
29
}
30
.one {
31
  background: #EC4D3C;
32
}
33
.one a {
34
  border-radius: 10px;
35
  color:  #EC4D3C;
36
  background-color: white;
37
  background-image: -webkit-radial-gradient(#FCD2D1 2px, rgba(255,0,0,0) 2px);
38
  background-image: -o-radial-gradient(#FCD2D1 2px, rgba(255,0,0,0) 2px);
39
  background-image: radial-gradient(#FCD2D1 2px, transparent 2px);
40
  background-size: 12px 12px;
41
  box-shadow: 2px 2px 3px rgba(0,0,0,0.3);
42
}
43
.one a:hover {
44
  background-size: 16px 16px;
45
}
46
.two {
47
  background: #F17434;
48
}
49
.two a {
50
  border-radius: 10px;
51
  color:  #F17434;
52
  background-color: white;
53
  background-image:
54
-webkit-repeating-linear-gradient(45deg, #FFDDBB, #FFDDBB 1px, rgba(255,0,0,0) 2px, rgba(255,0,0,0) 10px),
55
-webkit-repeating-linear-gradient(135deg, #FFDDBB, #FFDDBB 1px, rgba(255,0,0,0) 2px, rgba(255,0,0,0) 10px);
56
  background-image:
57
-o-repeating-linear-gradient(45deg, #FFDDBB, #FFDDBB 1px, rgba(255,0,0,0) 2px, rgba(255,0,0,0) 10px),
58
-o-repeating-linear-gradient(135deg, #FFDDBB, #FFDDBB 1px, rgba(255,0,0,0) 2px, rgba(255,0,0,0) 10px);
59
  background-image:
60
repeating-linear-gradient(45deg, #FFDDBB, #FFDDBB 1px, transparent 2px, transparent 10px),
61
repeating-linear-gradient(135deg, #FFDDBB, #FFDDBB 1px, transparent 2px, transparent 10px);
62
  box-shadow: 2px 2px 3px rgba(0,0,0,0.3);
63
}
64
.two a:hover {
65
  background-image:
66
-webkit-repeating-linear-gradient(left, #FFDDBB, #FFDDBB 1px, rgba(255,0,0,0) 2px, rgba(255,0,0,0) 10px);
67
  background-image:
68
-o-repeating-linear-gradient(90deg, #FFDDBB, #FFDDBB 1px, rgba(255,0,0,0) 2px, rgba(255,0,0,0) 10px);
69
  background-image:
70
repeating-linear-gradient(90deg, #FFDDBB, #FFDDBB 1px, transparent 2px, transparent 10px);
71
}
72
.three {
73
  background: #36454A;
74
}
75
.three a {
76
  border-radius: 10px;
77
  color:  #36454A;
78
  background: -webkit-linear-gradient(top, #A4D3E0 , #A4D3E0 50%, #CBE3EB 50%);
79
  background: -o-linear-gradient(top, #A4D3E0 , #A4D3E0 50%, #CBE3EB 50%);
80
  background: linear-gradient(to top, #A4D3E0 , #A4D3E0 50%, #CBE3EB 50%);
81
  box-shadow: 2px 2px 3px black;
82
}
83
.three a:hover {
84
  background: -webkit-linear-gradient(bottom, #A4D3E0 , #A4D3E0 50%, #CBE3EB 50%);
85
  background: -o-linear-gradient(bottom, #A4D3E0 , #A4D3E0 50%, #CBE3EB 50%);
86
  background: linear-gradient(to bottom, #A4D3E0 , #A4D3E0 50%, #CBE3EB 50%);
87
}
88
.four {
89
  background: #C4C100;
90
}
91
.four a{
92
  border-radius: 10px;
93
  color: #598428;
94
  background: -webkit-linear-gradient(70deg, #C3D600, #C3D600 50%, #A5B400 50%);
95
  background: -o-linear-gradient(20deg, #C3D600, #C3D600 50%, #A5B400 50%);
96
  background: linear-gradient(20deg, #C3D600, #C3D600 50%, #A5B400 50%);
97
  box-shadow: 2px 2px 3px rgba(0,0,0,0.3);
98
}
99
.four a:hover {
100
  background: -webkit-linear-gradient(-110deg, #C3D600, #C3D600 50%, #A5B400 50%);
101
  background: -o-linear-gradient(-160deg, #C3D600, #C3D600 50%, #A5B400 50%);
102
  background: linear-gradient(-160deg, #C3D600, #C3D600 50%, #A5B400 50%);
103
}
104
.five {
105
  background: #B1956C;
106
}
107
.five a {
108
  border-radius: 10px;
109
  color: #40382D;
110
  box-shadow: inset 0 -5px 0 #40382D;
111
}
112
.five a:hover {
113
  box-shadow: inset 0 -55px 0 #40382D,
114
    2px 2px 3px rgba(0,0,0,0.3);
115
  color: #DECDA5;
116
}
117
.six {
118
  background: #FCCE30;
119
}
120
.six a {
121
  border-radius: 10px;
122
  color: #CEA640;
123
  background: #FFF79A;
124
  border-bottom: 5px solid #E1B442;
125
  box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
126
}
127
.six a:hover {
128
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
129
  text-shadow: 0 1px 0 rgba(0,0,0,0.3);
130
}
131
.seven {
132
  background: #B2D4CF;
133
}
134
.seven a {
135
  color: #45A0A4;
136
  background: -webkit-linear-gradient(right, #E3612C 0, #E3612C 33.3%, #FCCE30 33.3%, #FCCE30 66.6%, #58554B 66.6%, #58554B) bottom no-repeat;
137
  background: -o-linear-gradient(right, #E3612C 0, #E3612C 33.3%, #FCCE30 33.3%, #FCCE30 66.6%, #58554B 66.6%, #58554B) bottom no-repeat;
138
  background: linear-gradient(to right, #E3612C 0, #E3612C 33.3%, #FCCE30 33.3%, #FCCE30 66.6%, #58554B 66.6%, #58554B) bottom no-repeat;
139
  background-size: 70% 5px;
140
}
141
.seven a:hover {
142
  background-size: 100% 5px;
143
}
144
.eight {
145
  background: #E3612C;
146
}
147
.eight a {
148
  border-radius: 10px;
149
  background: #E8CCB5;
150
  color: #B05151;
151
  padding: 15px 30px;
152
  position: relative;
153
  box-shadow: 2px 2px 3px rgba(0,0,0,0.3);
154
}
155
.eight a:before, .eight a:after {
156
  content: "";
157
  display: inline-block;
158
  position: absolute;
159
  top: calc(50% - 5px);
160
  width: 10px;
161
  height: 10px;
162
  border-radius: 50%;
163
  background: #F58262;
164
  box-shadow: inset 0 -2px 0 #B05151;
165
  opacity: 0;
166
  -webkit-transition: 0.5s ease-in-out;
167
  -o-transition: 0.5s ease-in-out;
168
  transition: 0.5s ease-in-out;
169
}
170
.eight a:before {
171
  left: 13px;
172
}
173
.eight a:after {
174
  right: 13px;
175
}
176
.eight a:hover:before, .eight a:hover:after {
177
  opacity: 1;
178
}
179
.nine {
180
  background: #58554B;
181
}
182
.nine a {
183
  color: #E7E5DD;
184
  text-shadow: 1px 1px black;
185
  background: url(http://html5book.ru/wp-content/uploads/2015/01/borger-grey.png) repeat-x;
186
  border-bottom: 1px solid  #bfc1ad;
187
  border-left: 1px solid  #bfc1ad;
188
  border-right:  1px solid  #bfc1ad;
189
}
190
.nine a:hover {
191
  background-position: 300px 0;
192
}
193
.ten {
194
  background: #BDB9AB;
195
}
196
.ten a {
197
  color: #E7E5DD;
198
  border-radius: 25px;
199
  border: 3px solid #E7E5DD;
200
}
201
.ten a:hover {
202
  color: #BDB9AB;
203
  background: #E7E5DD;
204
}
205
.ten a span {
206
  opacity: 0;
207
  padding-left: 5px;
208
  padding-right: 5px;
209
  font-weight: bold;
210
  -webkit-transition: 0.4s ease-in-out;
211
  -o-transition: 0.4s ease-in-out;
212
  transition: 0.4s ease-in-out;
213
}
214
.ten a:hover span {
215
  opacity: 1;
216
  padding-left: 10px;
217
  padding-right: 10px;
218
  color: #BDB9AB;
219
}
 

collection of button design

CSSDeck G+