Ajax Loader
×
HTML 
<a href="#" class="btn">button</a>
1
<a href="#" class="btn">button</a>
2
<a href="#" class="btn-rounded">button</a>
3
<a href="#" class="btn-small">button</a>
4
<a href="#" class="btn-small-rounded">button</a>
5
<a href="#" class="btn-large">button</a>
6
<a href="#" class="btn-large-rounded">button</a>
7
 
8
<pre>
9
 
10
<code>
11
 
12
HTML:
13
 
14
<pre>&lt;a href="#" class="btn"&gt;button&lt;/a&gt;
15
&lt;a href="#" class="btn-rounded"&gt;button&lt;/a&gt;
16
<pre>&lt;a href="#" class="btn-small"&gt;button&lt;/a&gt;
17
&lt;a href="#" class="btn-small-rounded"&gt;button&lt;/a&gt;
18
&lt;a href="#" class="btn-large"&gt;button&lt;/a&gt;
19
&lt;a href="#" class="btn-large-rounded"&gt;button&lt;/a&gt;
20
 
21
 
22
CSS:
23
 
24
[class^=btn] {
25
  display: inline-block;
26
  font-size: 1.2em;
27
  line-height: 1.75;
28
  text-decoration: none;
29
  color: white;
30
  padding: 0 1.5em;
31
  background-color: green;
32
}
33
 
34
[class^=btn-small] { font-size: .8em }
35
[class^=btn-large] { font-size: 1.5em }
36
[class$=rounded] { border-radius: .3em }
37
 
38
</code>
39
 
40
</pre>
 
CSS 
body {
1
body {
2
  padding-top: 100px;
3
  text-align: center;
4
  font-size: 100%;
5
}
6
 
7
pre {
8
  width: 550px;
9
  margin: 0 auto;
10
  text-align: left;
11
}
12
 
13
[class^=btn] {
14
  display: inline-block;
15
  font-size: 1.2em;
16
  line-height: 1.75;
17
  text-decoration: none;
18
  color: white;
19
  padding: 0 1.5em;
20
  background-color: green;
21
}
22
 
23
[class^=btn-small] { font-size: 1em }
24
[class^=btn-large] { font-size: 1.5em }
25
[class$=rounded] { border-radius: .3em }
 

Untitled

CSSDeck G+