Ajax Loader
HTML
<a href="#" id="search"></a>
1
<a href="#" id="search"></a>
2
<p>Hover me</p>
 
CSS
p{
1
p{
2
margin:50px auto;
3
text-align:center;
4
color:#19d;
5
}
6
#search{
7
margin:100px auto;
8
display:block;
9
cursor:pointer;
10
width:60px;
11
height:60px;
12
border:10px solid #19d;
13
-webkit-border-radius:60px;
14
   -moz-border-radius:60px;
15
        border-radius:60px;
16
-webkit-transform:rotate(-45deg);
17
   -moz-transform:rotate(-45deg);
18
    -ms-transform:rotate(-45deg);
19
     -o-transform:rotate(-45deg);
20
        transform:rotate(-45deg);
21
-webkit-transition:.2s;
22
   -moz-transition:.2s;
23
     -o-transition:.2s;
24
        transition:.2s;
25
}
26
#search:after{
27
content:'';
28
display:block;
29
margin:60px auto;
30
width:22px;
31
height:45px;
32
-webkit-border-radius:5px;
33
   -moz-border-radius:5px;
34
        border-radius:5px;
35
background:#19d;
36
}
37
#search:hover{
38
width:0px;
39
height:0px;
40
border:40px solid #19d;
41
-webkit-transform:rotate(45deg);
42
   -moz-transform:rotate(45deg);
43
    -ms-transform:rotate(45deg);
44
     -o-transform:rotate(45deg);
45
        transform:rotate(45deg);
46
-webkit-border-radius:60px 60px 0px 60px;
47
   -moz-border-radius:60px 60px 0px 60px;
48
        border-radius:60px 60px 0px 60px;
49
}
50
#search:hover:after{
51
content:'';
52
display:block;
53
margin:-15px -15px;
54
width:30px;
55
height:30px;
56
-webkit-border-radius:30px;
57
   -moz-border-radius:30px;
58
        border-radius:30px;
59
background:#fff;
60
-webkit-transition:.5s;
61
   -moz-transition:.5s;
62
     -o-transition:.5s;
63
        transition:.5s;
64
}
65
 
 

hover search map icon

CSSDeck G+