Ajax Loader
HTML 
    <a href="javascript:void(0);" class="button">upload</a>
1
    <a href="javascript:void(0);" class="button">upload</a>
2
    <a href="javascript:void(0);" class="button">This button is unusually wide</a>
3
    <a href="javascript:void(0);" class="button">submit</a>
4
    <br />
5
    <a href="javascript:void(0);" class="button">search</a>
6
    <a href="javascript:void(0);" class="button">Buttons can contain<br />line breaks</a>
7
    <a href="javascript:void(0);" class="button">release the penguins</a>
 
CSS 
      body {
1
      body {
2
        background: #111c29;
3
        padding: 100px;
4
        text-align: center;
5
      }
6
      .button {
7
        text-decoration: none;
8
        position: relative;
9
        color: white;
10
        font-family: Helvetica;
11
        font-size: 12px;
12
        text-transform: uppercase;
13
        font-weight: bold;
14
        -webkit-font-smoothing: antialiased;
15
        -moz-font-smoothing: antialiased;
16
        text-shadow: 0 1px 2px rgba(0,0,0,0.2);
17
        display: inline-block;
18
        min-width: 90px;
19
        text-align: center;
20
        line-height: 16px;
21
        padding: 8px 10px;
22
        -webkit-user-select: none;
23
        border-radius: 2px;
24
        border-top: 1px solid #486f7d;
25
        border-bottom: 1px solid #2c4460;
26
        background: -webkit-gradient(radial, 50% -10, 0, center top, 40, from(rgba(112,172,228,0.15)), to(rgba(112,172,228,0))),
27
                    -webkit-gradient(linear, center top, center bottom, from(#1c2b39), to(#131e2b));
28
        background: -moz-radial-gradient(50% -10px, circle closest-side, rgba(112,172,228,0.15), rgba(112,172,228,0) 40px),
29
                    -moz-linear-gradient(top, #1c2b39, #131e2b);
30
        -webkit-box-shadow: 0 5px 0 #0b141e, 0 5px 0 1px #060a0d, 0 0 0 1px #08121e;
31
        -moz-box-shadow: 0 5px 0 #0b141e, 0 5px 0 1px #060a0d, 0 0 0 1px #08121e;
32
        top: -4px;
33
        margin: 1px;
34
        margin-bottom: 9px;
35
        vertical-align: middle;
36
        -webkit-box-sizing: content-box;
37
        -moz-box-sizing: content-box;
38
        -webkit-transition: -webkit-box-shadow 0.075s ease-out,
39
                            top 0.075s ease-out;
40
        -webkit-transition: -webkit-box-shadow 0.075s ease-out,
41
                            top 0.075s ease-out;
42
      }
43
      @-moz-document url-prefix() {
44
        .button {
45
          font-weight: normal;
46
          
47
        }
48
      }
49
      .button:active {
50
        top: 0; outline: none;
51
        -webkit-box-shadow: 0 1px 0 #0b141e, 0 1px 0 1px #060a0d, 0 0 0 1px #08121e;
52
        -moz-box-shadow: 0 1px 0 #0b141e, 0 1px 0 1px #060a0d, 0 0 0 1px #08121e;
53
        -webkit-transition: -webkit-box-shadow 0.075s ease-in,
54
                            top 0.075s ease-in;
55
        -moz-transition: -webkit-box-shadow 0.075s ease-in,
56
                            top 0.075s ease-in;
57
      }
 

Tactile Buttons

CSSDeck G+