Ajax Loader
×
HTML 
<a href="#">kerstbal</a>
1
<a href="#">kerstbal</a>
2
<a href="#">slingers</a>
3
<a href="#">sneeuwschuiver</a>
4
<a href="#">kerstlampjes</a>
5
<div id="opvulling"></div>
 
CSS 
body {
1
body {
2
  background-color: #efefef;
3
}
4
 
5
a {
6
  width: 150px;
7
  height: 40px;
8
  display: block;
9
  text-align: center;
10
  line-height: 40px;
11
  color: #FFF;
12
  text-decoration: none;
13
  position: relative;
14
  margin: 0 auto;
15
  top: 200px;
16
  background: #910707;
17
  transition: all 0.2s ease-in-out;
18
  -webkit-box-shadow:  0px 3px 2px 0px rgba(0, 0, 0, 0.2);
19
  box-shadow:  0px 3px 2px 0px rgba(0, 0, 0, 0.2);
20
  font-size: 12px;
21
  text-transform: uppercase;
22
}
23
 
24
a:hover {
25
  width: 170px;
26
  background: #c40808;
27
  text-shadow: -1px -1px 0px rgba(0, 0, 0, 0.5);
28
}
29
 
30
a:before {
31
  content: " ";
32
  float: left;
33
  top: 30px;
34
  position: absolute;
35
  display: block;
36
  width: 0;
37
  height: 0;
38
  border-top: 10px solid transparent;
39
  border-bottom: 10px solid transparent;
40
  border-right:10px solid #500000;
41
  z-index: -2;
42
}
43
 
44
a:after {
45
  content: " ";
46
  float: right;
47
  top: 30px;
48
  right: 0;
49
  position: absolute;
50
  display: block;
51
  width: 0;
52
  height: 0;
53
  border-top: 10px solid transparent;
54
  border-bottom: 10px solid transparent;
55
  border-left: 10px solid #500000;
56
  z-index: -2;
57
}
58
 
59
#opvulling {
60
  position: relative;
61
  margin: 0 auto;
62
  width: 150px;
63
  height: 240px;
64
  z-index:-1;
65
  -webkit-border-radius: 3px;
66
  border-radius: 3px;
67
  background-image: url(http://image.shutterstock.com/display_pic_with_logo/356110/116702986/stock-photo-abstract-shiny-blur-christmas-background-116702986.jpg);
68
  background-position: 150px, 50px;
69
  -webkit-box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.2);
70
  box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.2);
71
}
72
 
73
 
 

christmas navigation

CSSDeck G+