Ajax Loader
×
HTML
<!DOCTYPE html>
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
<meta charset="utf-8">
5
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6
<meta name="viewport" content="width=device-width, initial-scale=1">
7
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
8
<meta name="description" content="">
9
<meta name="author" content="">
10
<link rel="icon" href="../../favicon.ico">
11
<title>Animated CSS3 Buttons - Designify.me</title>
12
 
13
<!-- Bootstrap core CSS -->
14
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
15
 
16
<!-- Custom styles for this template -->
17
<link href="http://designify.me/code-snippets/animated-buttons/css/btns.css" rel="stylesheet">
18
<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,500,700' rel='stylesheet' type='text/css'>
19
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
20
 
21
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
22
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
23
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
24
<!--[if lt IE 9]>
25
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
26
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
27
    <![endif]-->
28
</head>
29
 
30
<body>
31
<nav class="navbar navbar-inverse navbar-fixed-top">
32
  <div class="container">
33
    <div class="navbar-header">
34
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
35
      <a class="navbar-brand" href="http://designify.me/tutorials/flat-buttons-with-animated-hover-effects/">Animated Buttons Demo</a> </div>
36
    <div id="navbar" class="navbar-collapse collapse">
37
      <ul class="nav navbar-nav navbar-right">
38
        <li><a href="http://designify.me/tutorials/flat-buttons-with-animated-hover-effects/">Go to Designify.me</a></li>
39
      </ul>
40
    </div>
41
    <!--/.navbar-collapse --> 
42
  </div>
43
</nav>
44
 
45
<!-- Main jumbotron for a primary marketing message or call to action -->
46
<div class="jumbotron text-center">
47
  <div class="container">
48
    
49
    <h1>Animated CSS3 Buttons</h1>
50
    <p style="color:#888">More resources at <a href="http://designify.me/">designify.me</a></p>
51
    
52
  </div>
53
</div>
54
<div class="container"> 
55
  <!-- Example row of columns -->
56
  
57
  <div class="row">
58
    <div class="col-md-12 text-center">
59
      <h2>Victoria</h2>
60
    </div>
61
  </div>
62
  
63
  <div class="row">
64
    <div class="col-md-3 col-sm-3 col-xs-6"> <a href="#" class="btn btn-sm animated-button victoria-one">Sign up</a> </div>
65
    <div class="col-md-3 col-sm-3 col-xs-6"> <a href="#" class="btn btn-sm animated-button victoria-two">Login</a> </div>
66
    <div class="col-md-3 col-sm-3 col-xs-6"> <a href="#" class="btn btn-sm animated-button victoria-three">Register</a> </div>
67
    <div class="col-md-3 col-sm-3 col-xs-6"> <a href="#" class="btn btn-sm animated-button victoria-four">Learn more</a> </div>
68
  </div>
69
  
70
  <div class="row">
71
    <div class="col-md-12 text-center">
72
      <h2 class="mrng-60-top">Sandy</h2>
73
    </div>
74
  </div>
75
  
76
  <div class="row">
77
    <div class="col-md-3 col-sm-3 col-xs-6"> <a href="#" class="btn btn-sm animated-button sandy-one">Sign up</a> </div>
78
    <div class="col-md-3 col-sm-3 col-xs-6"> <a href="#" class="btn btn-sm animated-button sandy-two">Login</a> </div>
79
    <div class="col-md-3 col-sm-3 col-xs-6"> <a href="#" class="btn btn-sm animated-button sandy-three">Register</a> </div>
80
    <div class="col-md-3 col-sm-3 col-xs-6"> <a href="#" class="btn btn-sm animated-button sandy-four">Learn more</a> </div>
81
  </div>
82
  
83
  
84
  
85
  <div class="row">
86
    <div class="col-md-12 text-center">
87
      <h2 class="mrng-60-top">Gibson</h2>
88
    </div>
89
  </div>
90
  
91
  <div class="row">
92
    <div class="col-md-3 col-sm-3 col-xs-6"> <a href="#" class="btn btn-sm animated-button gibson-one">Sign up</a> </div>
93
    <div class="col-md-3 col-sm-3 col-xs-6"> <a href="#" class="btn btn-sm animated-button gibson-two">Login</a> </div>
94
    <div class="col-md-3 col-sm-3 col-xs-6"> <a href="#" class="btn btn-sm animated-button gibson-three">Register</a> </div>
95
    <div class="col-md-3 col-sm-3 col-xs-6"> <a href="#" class="btn btn-sm animated-button gibson-four">Learn more</a> </div>
96
  </div>
97
  
98
  
99
  
100
  <div class="row">
101
    <div class="col-md-12 text-center">
102
      <h2 class="mrng-60-top">Thar</h2>
103
    </div>
104
  </div>
105
  
106
  <div class="row">
107
    <div class="col-md-3 col-sm-3 col-xs-6"> <a href="#" class="btn btn-sm animated-button thar-one">Sign up</a> </div>
108
    <div class="col-md-3 col-sm-3 col-xs-6"> <a href="#" class="btn btn-sm animated-button thar-two">Login</a> </div>
109
    <div class="col-md-3 col-sm-3 col-xs-6"> <a href="#" class="btn btn-sm animated-button thar-three">Register</a> </div>
110
    <div class="col-md-3 col-sm-3 col-xs-6"> <a href="#" class="btn btn-sm animated-button thar-four">Learn more</a> </div>
111
  </div>
112
  
113
 
114
  
115
  
116
  <footer>
117
    <hr  style="margin-top:50px;" />
118
    <p class="text-center">Created with <span class="icon"><i class="fa fa-heart fa-lg"></i></span> by <a href="http://designify.me/" target="_blank"> Designify.me</a></p>
119
  </footer>
120
</div>
121
<!-- /container --> 
122
 
123
<!-- Bootstrap core JavaScript
124
    ================================================== --> 
125
<!-- Placed at the end of the document so the pages load faster --> 
126
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
127
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
128
</body>
129
</html>
130
 
 
CSS
body {
1
body {
2
  padding-top: 50px;
3
  padding-bottom: 20px;
4
  font-family: 'Ubuntu', sans-serif;
5
  background: #353535;
6
  color: #FFF;
7
}
8
.jumbotron h1 {
9
  color: #353535;
10
}
11
span.icon {
12
  margin: 0 5px;
13
  color: #D64541;
14
}
15
h2 {
16
  color: #BDC3C7
17
}
18
.mrng-60-top {
19
  margin-top: 60px;
20
}
21
/* Global Button Styles */
22
a.animated-button:link, a.animated-button:visited {
23
  position: relative;
24
  display: block;
25
  margin: 30px auto 0;
26
  padding: 14px 15px;
27
  color: #fff;
28
  font-size:14px;
29
  font-weight: bold;
30
  text-align: center;
31
  text-decoration: none;
32
  text-transform: uppercase;
33
  overflow: hidden;
34
  letter-spacing: .08em;
35
  border-radius: 0;
36
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
37
  -webkit-transition: all 1s ease;
38
  -moz-transition: all 1s ease;
39
  -o-transition: all 1s ease;
40
  transition: all 1s ease;
41
}
42
a.animated-button:link:after, a.animated-button:visited:after {
43
  content: "";
44
  position: absolute;
45
  height: 0%;
46
  left: 50%;
47
  top: 50%;
48
  width: 150%;
49
  z-index: -1;
50
  -webkit-transition: all 0.75s ease 0s;
51
  -moz-transition: all 0.75s ease 0s;
52
  -o-transition: all 0.75s ease 0s;
53
  transition: all 0.75s ease 0s;
54
}
55
a.animated-button:link:hover, a.animated-button:visited:hover {
56
  color: #FFF;
57
  text-shadow: none;
58
}
59
a.animated-button:link:hover:after, a.animated-button:visited:hover:after {
60
  height: 450%;
61
}
62
a.animated-button:link, a.animated-button:visited {
63
  position: relative;
64
  display: block;
65
  margin: 30px auto 0;
66
  padding: 14px 15px;
67
  color: #fff;
68
  font-size:14px;
69
  border-radius: 0;
70
  font-weight: bold;
71
  text-align: center;
72
  text-decoration: none;
73
  text-transform: uppercase;
74
  overflow: hidden;
75
  letter-spacing: .08em;
76
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
77
  -webkit-transition: all 1s ease;
78
  -moz-transition: all 1s ease;
79
  -o-transition: all 1s ease;
80
  transition: all 1s ease;
81
}
82
 
83
/* Victoria Buttons */
84
 
85
a.animated-button.victoria-one {
86
  border: 2px solid #D24D57;
87
}
88
a.animated-button.victoria-one:after {
89
  background: #D24D57;
90
  -moz-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
91
  -ms-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
92
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
93
  transform: translateX(-50%) translateY(-50%) rotate(-25deg);
94
}
95
a.animated-button.victoria-two {
96
  border: 2px solid #D24D57;
97
}
98
a.animated-button.victoria-two:after {
99
  background: #D24D57;
100
  -moz-transform: translateX(-50%) translateY(-50%) rotate(25deg);
101
  -ms-transform: translateX(-50%) translateY(-50%) rotate(25deg);
102
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(25deg);
103
  transform: translateX(-50%) translateY(-50%) rotate(25deg);
104
}
105
a.animated-button.victoria-three {
106
  border: 2px solid #D24D57;
107
}
108
a.animated-button.victoria-three:after {
109
  background: #D24D57;
110
  opacity: .5;
111
  -moz-transform: translateX(-50%) translateY(-50%);
112
  -ms-transform: translateX(-50%) translateY(-50%);
113
  -webkit-transform: translateX(-50%) translateY(-50%);
114
  transform: translateX(-50%) translateY(-50%);
115
}
116
a.animated-button.victoria-three:hover:after {
117
  height: 140%;
118
  opacity: 1;
119
}
120
a.animated-button.victoria-four {
121
  border: 2px solid #D24D57;
122
}
123
a.animated-button.victoria-four:after {
124
  background: #D24D57;
125
  opacity: .5;
126
  -moz-transform: translateY(-50%) translateX(-50%) rotate(90deg);
127
  -ms-transform: translateY(-50%) translateX(-50%) rotate(90deg);
128
  -webkit-transform: translateY(-50%) translateX(-50%) rotate(90deg);
129
  transform: translateY(-50%) translateX(-50%) rotate(90deg);
130
}
131
a.animated-button.victoria-four:hover:after {
132
  opacity: 1;
133
  height: 600% !important;
134
}
135
/* Sandy Buttons */
136
 
137
a.animated-button.sandy-one {
138
  border: 2px solid #AEA8D3;
139
  color: #FFF;
140
}
141
a.animated-button.sandy-one:after {
142
  border: 3px solid #AEA8D3;
143
  opacity: 0;
144
  -moz-transform: translateX(-50%) translateY(-50%);
145
  -ms-transform: translateX(-50%) translateY(-50%);
146
  -webkit-transform: translateX(-50%) translateY(-50%);
147
  transform: translateX(-50%) translateY(-50%);
148
  
149
}
150
a.animated-button.sandy-one:hover:after {
151
  height: 120% !important;
152
  opacity: 1;
153
  color: #FFF;
154
}
155
a.animated-button.sandy-two {
156
  border: 2px solid #AEA8D3;
157
  color: #FFF;
158
}
159
a.animated-button.sandy-two:after {
160
  border: 3px solid #AEA8D3;
161
  opacity: 0;
162
  -moz-transform: translateY(-50%) translateX(-50%) rotate(90deg);
163
  -ms-transform: translateY(-50%) translateX(-50%) rotate(90deg);
164
  -webkit-transform: translateY(-50%) translateX(-50%) rotate(90deg);
165
  transform: translateY(-50%) translateX(-50%) rotate(90deg);
166
}
167
a.animated-button.sandy-two:hover:after {
168
  height: 600% !important;
169
  opacity: 1;
170
  color: #FFF;
171
}
172
a.animated-button.sandy-three {
173
  border: 2px solid #AEA8D3;
174
  color: #FFF;
175
}
176
a.animated-button.sandy-three:after {
177
  border: 3px solid #AEA8D3;
178
  opacity: 0;
179
  -moz-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
180
  -ms-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
181
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
182
  transform: translateX(-50%) translateY(-50%) rotate(-25deg);
183
}
184
a.animated-button.sandy-three:hover:after {
185
  height: 400% !important;
186
  opacity: 1;
187
  color: #FFF;
188
}
189
a.animated-button.sandy-four {
190
  border: 2px solid #AEA8D3;
191
  color: #FFF;
192
}
193
a.animated-button.sandy-four:after {
194
  border: 3px solid #AEA8D3;
195
  opacity: 0;
196
  -moz-transform: translateY(-50%) translateX(-50%) rotate(25deg);
197
  -ms-transform: translateY(-50%) translateX(-50%) rotate(25deg);
198
  -webkit-transform: translateY(-50%) translateX(-50%) rotate(25deg);
199
  transform: translateY(-50%) translateX(-50%) rotate(25deg);
200
}
201
a.animated-button.sandy-four:hover:after {
202
  height: 400% !important;
203
  opacity: 1;
204
  color: #FFF;
205
}
206
/* Gibson Buttons */
207
 
208
a.animated-button.gibson-one {
209
  border: 2px solid #65b37a;
210
  color: #FFF;
211
}
212
a.animated-button.gibson-one:after {
213
  opacity: 0;
214
  background-image: -webkit-linear-gradient( transparent 50%, rgba(101,179,122,0.2) 50%);
215
  background-image: -moz-linear-gradient(transparent 50%, rgba(101,179,122,0.2) 50%);
216
  background-size: 10px 10px;
217
  -moz-transform: translateX(-50%) translateY(-50%) rotate(25deg);
218
  -ms-transform: translateX(-50%) translateY(-50%) rotate(25deg);
219
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(25deg);
220
  transform: translateX(-50%) translateY(-50%) rotate(25deg);
221
}
222
a.animated-button.gibson-one:hover:after {
223
  height: 600% !important;
224
  opacity: 1;
225
  color: #FFF;
226
}
227
a.animated-button.gibson-two {
228
  border: 2px solid #65b37a;
229
  color: #FFF;
230
}
231
a.animated-button.gibson-two:after {
232
  opacity: 0;
233
  background-image: -webkit-linear-gradient( transparent 50%, rgba(101,179,122,0.2) 50%);
234
  background-image: -moz-linear-gradient(transparent 50%, rgba(101,179,122,0.2) 50%);
235
  background-size: 10px 10px;
236
  -moz-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
237
  -ms-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
238
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
239
  transform: translateX(-50%) translateY(-50%) rotate(-25deg);
240
}
241
a.animated-button.gibson-two:hover:after {
242
  height: 600% !important;
243
  opacity: 1;
244
  color: #FFF;
245
}
246
a.animated-button.gibson-three {
247
  border: 2px solid #65b37a;
248
  color: #FFF;
249
}
250
a.animated-button.gibson-three:after {
251
  opacity: 0;
252
  background-image: -webkit-linear-gradient( transparent 50%, rgba(101,179,122,0.2) 50%);
253
  background-image: -moz-linear-gradient(transparent 50%, rgba(101,179,122,0.2) 50%);
254
  background-size: 10px 10px;
255
  -moz-transform: translateX(-50%) translateY(-50%) rotate(90deg);
256
  -ms-transform: translateX(-50%) translateY(-50%) rotate(90deg);
257
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(90deg);
258
  transform: translateX(-50%) translateY(-50%) rotate(90deg);
259
}
260
a.animated-button.gibson-three:hover:after {
261
  height: 600% !important;
262
  opacity: 1;
263
  color: #FFF;
264
}
265
a.animated-button.gibson-four {
266
  border: 2px solid #65b37a;
267
  color: #FFF;
268
}
269
a.animated-button.gibson-four:after {
270
  opacity: 0;
271
  background-image: -webkit-linear-gradient( transparent 50%, rgba(101,179,122,0.2) 50%);
272
  background-image: -moz-linear-gradient(transparent 50%, rgba(101,179,122,0.2) 50%);
273
  background-size: 10px 10px;
274
  -moz-transform: translateX(-50%) translateY(-50%);
275
  -ms-transform: translateX(-50%) translateY(-50%));
276
  -webkit-transform: translateX(-50%) translateY(-50%);
277
  transform: translateX(-50%) translateY(-50%);
278
}
279
a.animated-button.gibson-four:hover:after {
280
  height: 600% !important;
281
  opacity: 1;
282
  color: #FFF;
283
}
284
/* Thar Buttons */
285
 
286
a.animated-button.thar-one {
287
  color: #fff;
288
  cursor: pointer;
289
  display: block;
290
  position: relative;
291
  border: 2px solid #F7CA18;
292
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
293
}
294
a.animated-button.thar-one:hover {
295
  color: #000 !important;
296
  background-color: transparent;
297
  text-shadow: none;
298
}
299
a.animated-button.thar-one:hover:before {
300
  bottom: 0%;
301
  top: auto;
302
  height: 100%;
303
}
304
a.animated-button.thar-one:before {
305
  display: block;
306
  position: absolute;
307
  left: 0px;
308
  top: 0px;
309
  height: 0px;
310
  width: 100%;
311
  z-index: -1;
312
  content: '';
313
  color: #000 !important;
314
  background: #F7CA18;
315
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
316
}
317
a.animated-button.thar-two {
318
  color: #fff;
319
  cursor: pointer;
320
  display: block;
321
  position: relative;
322
  border: 2px solid #F7CA18;
323
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
324
}
325
a.animated-button.thar-two:hover {
326
  color: #000 !important;
327
  background-color: transparent;
328
  text-shadow: ntwo;
329
}
330
a.animated-button.thar-two:hover:before {
331
  top: 0%;
332
  bottom: auto;
333
  height: 100%;
334
}
335
a.animated-button.thar-two:before {
336
  display: block;
337
  position: absolute;
338
  left: 0px;
339
  bottom: 0px;
340
  height: 0px;
341
  width: 100%;
342
  z-index: -1;
343
  content: '';
344
  color: #000 !important;
345
  background: #F7CA18;
346
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
347
}
348
a.animated-button.thar-three {
349
  color: #fff;
350
  cursor: pointer;
351
  display: block;
352
  position: relative;
353
  border: 2px solid #F7CA18;
354
  transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
355
0s;
356
}
357
a.animated-button.thar-three:hover {
358
  color: #000 !important;
359
  background-color: transparent;
360
  text-shadow: nthree;
361
}
362
a.animated-button.thar-three:hover:before {
363
  left: 0%;
364
  right: auto;
365
  width: 100%;
366
}
367
a.animated-button.thar-three:before {
368
  display: block;
369
  position: absolute;
370
  top: 0px;
371
  right: 0px;
372
  height: 100%;
373
  width: 0px;
374
  z-index: -1;
375
  content: '';
376
  color: #000 !important;
377
  background: #F7CA18;
378
  transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
379
0s;
380
}
381
a.animated-button.thar-four {
382
  color: #fff;
383
  cursor: pointer;
384
  display: block;
385
  position: relative;
386
  border: 2px solid #F7CA18;
387
  transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
388
0s;
389
}
390
a.animated-button.thar-four:hover {
391
  color: #000 !important;
392
  background-color: transparent;
393
  text-shadow: nfour;
394
}
395
a.animated-button.thar-four:hover:before {
396
  right: 0%;
397
  left: auto;
398
  width: 100%;
399
}
400
a.animated-button.thar-four:before {
401
  display: block;
402
  position: absolute;
403
  top: 0px;
404
  left: 0px;
405
  height: 100%;
406
  width: 0px;
407
  z-index: -1;
408
  content: '';
409
  color: #000 !important;
410
  background: #F7CA18;
411
  transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
412
0s;
413
}
414
 
 

Untitled

CSSDeck G+