Ajax Loader
×
HTML 
<div id="container">
1
<div id="container">
2
<div id="button-container">
3
  <div id="button" class="yellow">
4
    <div id="clock"><div id="clock-hand1"></div><div id="clock-hand2"></div></div>
5
    <p>Time schedule</p>
6
  </div>
7
</div>
8
 
9
<div id="button-container">
10
  <div id="button" class="green">
11
    <div id="order"><div id="order-line"></div><div id="order-line"></div></div>
12
    <p>Order list</p>
13
  </div>
14
</div>
15
 
16
<div id="button-container">
17
  <div id="button" class="blue">
18
    <div id="camera"><div id="camera-button"></div><div id="camera-optics"></div></div>
19
    <p>My photos</p>
20
  </div>
21
</div>
22
</div>
 
CSS 
#container{
1
#container{
2
  font-family:Arial, Helvetica, sans-serif;
3
  position:absolute;
4
  top:0;
5
  left:0;
6
  background: #005778;
7
  width:100%;
8
  height:100%;
9
}
10
 
11
#button-container{
12
  position:relative;
13
  left:40%;
14
  width:203px;
15
  height:43px;
16
  background-color: rgba(0,0,0, .05);
17
  padding-top:5px;
18
  margin-top:10px;
19
  -webkit-border-radius:8px;
20
  -moz-border-radius:8px;
21
  border-radius:8px;
22
  -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0, .3), 0px 1px 1px rgba(255,255,225,0.2);
23
  -moz-box-shadow:inset 0 1px 1px rgba(0,0,0, .3), 0px 1px 1px rgba(255,255,225,0.2);
24
  box-shadow:inset 0 1px 1px rgba(0,0,0, .2), 0 1px 1px rgba(255,255,225,0.15);
25
  /*Hover effect*/
26
  -webkit-transition: .5s all;
27
  -moz-transition: .5s all;
28
  -o-transition: .5s all;
29
  -ms-transition: .5s all;
30
  transition: .5s all;}
31
 
32
#button{
33
  position: absolute;
34
  top: 5px;
35
  left: 5px;
36
  width:193px;
37
  height:38px;
38
  margin:0px auto;
39
  -webkit-border-radius:20px;
40
  -moz-border-radius:20px;
41
  border-radius:6px;
42
  cursor:pointer;
43
 
44
}
45
 
46
#button p{
47
  margin-top: 11px;
48
  margin-left:60px;
49
  font-size:.9em;
50
}
51
 
52
#button-container:hover {
53
  -webkit-box-shadow: inset 0 1px 2px #000, 0px 0px 10px 5px rgba(255,255,225,0.2);
54
}
55
 
56
/*Colors*/
57
.yellow{
58
/*Gradient*/
59
  background: rgb(255,197,120); /* Old browsers */
60
  background: -moz-linear-gradient(top, rgba(255,197,120,1) 0%, rgba(251,157,35,1) 100%); /* FF3.6+ */
61
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,197,120,1)), color-stop(100%,rgba(251,157,35,1))); /* Chrome,Safari4+ */
62
  background: -webkit-linear-gradient(top, rgba(255,197,120,1) 0%,rgba(251,157,35,1) 100%); /* Chrome10+,Safari5.1+ */
63
  background: -o-linear-gradient(top, rgba(255,197,120,1) 0%,rgba(251,157,35,1) 100%); /* Opera 11.10+ */
64
  background: -ms-linear-gradient(top, rgba(255,197,120,1) 0%,rgba(251,157,35,1) 100%); /* IE10+ */
65
  background: linear-gradient(top, rgba(255,197,120,1) 0%,rgba(251,157,35,1) 100%); /* W3C */
66
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc578', endColorstr='#fb9d23',GradientType=0 ); /* IE6-9 */
67
}
68
 
69
.green{
70
  background: rgb(205,235,142); /* Old browsers */
71
  background: -moz-linear-gradient(top, rgba(205,235,142,1) 0%, rgba(165,201,86,1) 100%); /* FF3.6+ */
72
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(205,235,142,1)), color-stop(100%,rgba(165,201,86,1))); /* Chrome,Safari4+ */
73
  background: -webkit-linear-gradient(top, rgba(205,235,142,1) 0%,rgba(165,201,86,1) 100%); /* Chrome10+,Safari5.1+ */
74
  background: -o-linear-gradient(top, rgba(205,235,142,1) 0%,rgba(165,201,86,1) 100%); /* Opera 11.10+ */
75
  background: -ms-linear-gradient(top, rgba(205,235,142,1) 0%,rgba(165,201,86,1) 100%); /* IE10+ */
76
  background: linear-gradient(top, rgba(205,235,142,1) 0%,rgba(165,201,86,1) 100%); /* W3C */
77
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cdeb8e', endColorstr='#a5c956',GradientType=0 ); /* IE6-9 */
78
}
79
 
80
.blue{
81
  background: rgb(122,188,255); /* Old browsers */
82
  background: -moz-linear-gradient(top, rgba(122,188,255,1) 0%, rgba(96,171,248,1) 44%, rgba(64,150,238,1) 100%); /* FF3.6+ */
83
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(122,188,255,1)), color-stop(44%,rgba(96,171,248,1)), color-stop(100%,rgba(64,150,238,1))); /* Chrome,Safari4+ */
84
  background: -webkit-linear-gradient(top, rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%); /* Chrome10+,Safari5.1+ */
85
  background: -o-linear-gradient(top, rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%); /* Opera 11.10+ */
86
  background: -ms-linear-gradient(top, rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%); /* IE10+ */
87
  background: linear-gradient(top, rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%); /* W3C */
88
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 ); /* IE6-9 */
89
}
90
 
91
/*ICONS*/
92
#clock{
93
  position:absolute;
94
  top:10px;
95
  left:20px;
96
  width:15px;
97
  height:15px;
98
  border:2px solid #000;
99
  -webkit-border-radius:50%;
100
  -moz-border-radius:50%;
101
  border-radius:50%;
102
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
103
  filter: alpha(opacity=80);
104
  opacity:0.8;
105
}
106
#clock-hand1{
107
  position:absolute;
108
  width:0px;
109
  height:5px;
110
  border:1px solid #000;
111
  top:2px;
112
  left:7px;
113
}
114
#clock-hand2{
115
  position:absolute;
116
  width:5px;
117
  height:0px;
118
  border:1px solid #000;
119
  top:7px;
120
  left:7px;
121
}
122
 
123
#order{
124
  position:absolute;
125
  top:10px;
126
  left:23px;
127
  width:10px;
128
  height:15px;
129
  border:2px solid #000;
130
  -webkit-border-radius:2px;
131
  -moz-border-radius:2px;
132
  border-radius:2px;
133
  border-top-right-radius:5px;
134
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
135
  filter: alpha(opacity=80);
136
  opacity:0.8;
137
}
138
 
139
#order-line{
140
  position:absolute;
141
  width:4px;
142
  height:0px;
143
  border:1px solid #000;
144
  top:5px;
145
  left:0px;
146
}
147
 
148
#order-line:nth-child(2){
149
  top:10px;
150
  width:6px;
151
}
152
 
153
#camera{
154
  position:absolute;
155
  top:12px;
156
  left:23px;
157
  width:17px;
158
  height:11px;
159
  border:2px solid #000;
160
  -webkit-border-radius:2px;
161
  -moz-border-radius:2px;
162
  border-radius:2px;
163
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
164
  filter: alpha(opacity=80);
165
  opacity:0.8;
166
}
167
 
168
#camera-optics{
169
  position:absolute;
170
  top:1px;
171
  left:4px;
172
  width:5px;
173
  height:5px;
174
  border:2px solid #000;
175
  -webkit-border-radius:50%;
176
  -moz-border-radius:50%;
177
  border-radius:50%;
178
}
179
 
180
#camera-button{
181
  position:absolute;
182
  top:-3px;
183
  left:1px;
184
  width:0px;
185
  height:0px;
186
  border:2px solid #000;
187
  border-bottom:0;
188
}
 

Button (test)

CSSDeck G+