Ajax Loader
HTML
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:700' rel='stylesheet' type='text/css'>
1
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:700' rel='stylesheet' type='text/css'>
2
 
3
<a href="javascript:void(0);">Push me!</a>
 
CSS
body { background-image: url(http://subtlepatterns.com/patterns/ricepaper.png) }
1
body { background-image: url(http://subtlepatterns.com/patterns/ricepaper.png) }
2
 
3
a {
4
  position: relative;
5
    color: rgba(255,255,255,1);
6
    text-decoration: none;
7
    background-color: rgba(219,87,5,1);
8
    font-family: 'Yanone Kaffeesatz';
9
    font-weight: 700;
10
    font-size: 3em;
11
    display: block;
12
    padding: 4px;
13
    -webkit-border-radius: 8px;
14
    -moz-border-radius: 8px;
15
    border-radius: 8px;
16
    -webkit-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
17
    -moz-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
18
    box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
19
    margin: 100px auto;
20
  width: 160px;
21
  text-align: center;
22
  
23
  -webkit-transition: all .1s ease;
24
  -moz-transition: all .1s ease;
25
  -ms-transition: all .1s ease;
26
  -o-transition: all .1s ease;
27
  transition: all .1s ease;
28
}
29
 
30
a:active {
31
    -webkit-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
32
    -moz-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
33
    box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
34
    position: relative;
35
    top: 6px;
36
}
 

Fancy 3D-Button

CSSDeck G+