Ajax Loader
×
HTML
<a href="#" class="a-btn">  <span class="a-btn-slide-text">$29</span>
1
<a href="#" class="a-btn">  <span class="a-btn-slide-text">$29</span>
2
 
3
    <img src="http://tympanus.net/Tutorials/AnimatedButtons/images/icons/1.png" alt="Photos" /> <span class="a-btn-text"><small>Available on the Apple</small> App Store</span>   <span class="a-btn-icon-right"><span></span></span>
4
</a>
5
<a href="#" class="a-btn">  <span class="a-btn-slide-text">$19</span>
6
 
7
    <img src="http://tympanus.net/Tutorials/AnimatedButtons/images/icons/2.png" alt="Maps" /> <span class="a-btn-text"><small>Available on the Apple</small> App Store</span>   <span class="a-btn-icon-right"><span></span></span>
8
</a>
9
<a href="#" class="a-btn">  <span class="a-btn-slide-text">$24</span>
10
 
11
    <img src="http://tympanus.net/Tutorials/AnimatedButtons/images/icons/3.png" alt="Settings" /> <span class="a-btn-text"><small>Available on the Apple</small> App Store</span>   <span class="a-btn-icon-right"><span></span></span>
12
</a>
13
<a href="#" class="a-btn">  <span class="a-btn-slide-text">$39</span>
14
 
15
    <img src="http://tympanus.net/Tutorials/AnimatedButtons/images/icons/4.png" alt="Wireless" /> <span class="a-btn-text"><small>Available on the Apple</small> App Store</span>   <span class="a-btn-icon-right"><span></span></span>
16
</a>
 
CSS
body {
1
body {
2
  padding:10% 0 0 27%;
3
  color: #333;
4
  font-family: 'Oswald', Arial, sans-serif;
5
  font-size: 13px;
6
}
7
a{
8
  color: #fff;
9
  text-decoration: none;
10
}
11
 
12
.a-btn{
13
    background:#a9db80;
14
    background:-webkit-gradient(linear,left top,left bottom,color-stop(#a9db80,0),color-stop(#96c56f,1));
15
    background:-webkit-linear-gradient(top, #a9db80 0%, #96c56f 100%);
16
    background:-moz-linear-gradient(top, #a9db80 0%, #96c56f 100%);
17
    background:-o-linear-gradient(top, #a9db80 0%, #96c56f 100%);
18
    background:linear-gradient(top, #a9db80 0%, #96c56f 100%);
19
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9db80', endColorstr='#96c56f',GradientType=0 );
20
    padding-left:90px;
21
    padding-right:105px;
22
    height:90px;
23
    display:inline-block;
24
    position:relative;
25
    border:1px solid #80ab5d;
26
    -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
27
    -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
28
    box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
29
    -webkit-border-radius:4px;
30
    -moz-border-radius:4px;
31
    border-radius:4px;
32
    float:left;
33
    clear:both;
34
    margin:10px 0px;
35
    overflow:hidden;
36
    -webkit-transition:box-shadow 0.3s ease-in-out;
37
    -moz-transition:box-shadow 0.3s ease-in-out;
38
    -o-transition:box-shadow 0.3s ease-in-out;
39
    transition:box-shadow 0.3s ease-in-out;
40
}
41
.a-btn img{
42
    position:absolute;
43
    left:15px;
44
    top:13px;
45
    border:none;
46
    -webkit-transition:all 0.3s ease-in-out;
47
    -moz-transition:all 0.3s ease-in-out;
48
    -o-transition:all 0.3s ease-in-out;
49
    transition:all 0.3s ease-in-out;
50
}
51
.a-btn .a-btn-slide-text{
52
    position:absolute;
53
    font-size:36px;
54
    top:18px;
55
    left:18px;
56
    color:#6d954e;
57
    opacity:0;
58
    text-shadow:0px 1px 1px rgba(255,255,255,0.4);
59
    -webkit-transition:opacity 0.2s ease-in-out;
60
    -moz-transition:opacity 0.2s ease-in-out;
61
    -o-transition:opacity 0.2s ease-in-out;
62
    transition:opacity 0.2s ease-in-out;
63
}
64
.a-btn-text{
65
    padding-top:13px;
66
    display:block;
67
    font-size:30px;
68
    text-shadow:0px -1px 1px #80ab5d;
69
}
70
.a-btn-text small{
71
    display:block;
72
    font-size:11px;
73
    letter-spacing:1px;
74
}
75
.a-btn-icon-right{
76
    position:absolute;
77
    right:0px;
78
    top:0px;
79
    height:100%;
80
    width:80px;
81
    border-left:1px solid #80ab5d;
82
    -webkit-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
83
    -moz-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
84
    box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
85
}
86
.a-btn-icon-right span{
87
    width:38px;
88
    height:38px;
89
    opacity:0.7;
90
    -webkit-border-radius:20px;
91
    -moz-border-radius:20px;
92
    border-radius:20px;
93
    position:absolute;
94
    left:50%;
95
    top:50%;
96
    margin:-20px 0px 0px -20px;
97
    border:1px solid rgba(0,0,0,0.5);
98
    background:#4e5c50 url(http://tympanus.net/Tutorials/AnimatedButtons/images/arrow_down.png) no-repeat center center;
99
    -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.3) inset, 0px 1px 2px rgba(255,255,255,0.5);
100
    -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.3) inset, 0px 1px 2px rgba(255,255,255,0.5);
101
    box-shadow:0px 1px 1px rgba(255,255,255,0.3) inset, 0px 1px 2px rgba(255,255,255,0.5);
102
    -webkit-transition:all 0.3s ease-in-out;
103
    -moz-transition:all 0.3s ease-in-out;
104
    -o-transition:all 0.3s ease-in-out;
105
    transition:all 0.3s ease-in-out;
106
}
107
.a-btn:hover{
108
    -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);
109
    -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);
110
    box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);
111
}
112
.a-btn:hover img{
113
    -webkit-transform:scale(10);
114
    -moz-transform:scale(10);
115
    -ms-transform:scale(10);
116
    -o-transform:scale(10);
117
    transform:scale(10);
118
    opacity:0;
119
}
120
.a-btn:hover .a-btn-slide-text,
121
.a-btn:hover .a-btn-icon-right span{
122
    opacity:1;
123
}
124
.a-btn:active{
125
    position:relative;
126
    top:1px;
127
    background:#80ab5d;
128
    -webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
129
    -moz-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
130
    box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
131
    border-color:#a9db80;
132
}
133
.a-btn:active .a-btn-icon-right span{
134
    -webkit-transform:scale(1.4);
135
    -moz-transform:scale(1.4);
136
    -ms-transform:scale(1.4);
137
    -o-transform:scale(1.4);
138
    transform:scale(1.4);
139
}
140
 
 

Button Store DHF

CSSDeck G+