Ajax Loader
HTML
<div class="container">
1
<div class="container">
2
  <section class="3d-buttons">
3
    <h2>Creative 3D Buttons</h2>
4
    <p class="btn_perspective">
5
      <button class="btn btn-3d btn-3da">Submit
6
      </button>
7
    </p>
8
    <p class="btn_perspective">
9
      <button class="btn btn-3d btn-3db">Submit
10
      </button>
11
    </p>
12
    <p class="btn_perspective">
13
      <button class="btn btn-3d btn-3dc">Submit
14
      </button>
15
    </p>
16
    <p class="btn_perspective">
17
      <button class="btn btn-3d btn-3dd">Submit
18
      </button>
19
    </p>
20
 
21
  </section>
22
</div>
 
CSS
*, *:after, *:before{
1
*, *:after, *:before{
2
    -webkit-box-sizing:border-box;
3
    -moz-box-sizing:border-box;
4
    box-sizing:border-box;
5
    
6
}
7
body, html{
8
    font-size:100%;
9
    padding:0;
10
    margin:0;
11
    height:100%;
12
}
13
body{
14
    font-family:Arial, sans-serif;
15
    background:#0e83cd;
16
}
17
a{
18
    color:#888;
19
    text-decoration:none;
20
}
21
a:hover,
22
a:active{
23
    color:#333;   
24
}
25
.container{
26
    height:100%;
27
    position:relative;
28
}
29
.container > section{
30
    margin:0 auto;
31
    padding:6em 3em;
32
    text-align:center;
33
    color:#fff;
34
}
35
h2{
36
    color:#fff;
37
    margin:20px;
38
    text-align:center;
39
    text-transform:uppercase;
40
}
41
/* General button styles */
42
.btn{
43
    border:none;
44
    position:relative;
45
    background:none;
46
    padding:28px 90px;
47
    display:inline-block;
48
    text-transform:uppercase;
49
    margin:15px 30px;
50
    color:inherit;
51
    letter-spacing:2px;
52
    font-size:0.9em;
53
    outline:none;
54
    -moz-transition:all 0.4s;
55
    -webkit-transition:all 0.4s;
56
    transition:all 0.4s;
57
    cursor:pointer;
58
}
59
.btn:after{
60
    content:"";
61
    position:absolute;
62
    z-index:-1;
63
    -webkit-transition:all 0.4s;
64
    -moz-transition:all 0.4s;
65
    transition:all 04.s;
66
}
67
.btn_perspective{
68
    -webkit-perspective:800px;
69
    -moz-perspective:800px;
70
    perspective:800px;
71
    display:inline-block;
72
}
73
.btn-3d{
74
    display:block;
75
    background:#5cbcf6;
76
    outline:1px solid transparent;
77
    transform-style:preserve-3d;
78
}
79
.btn-3d:active{
80
    background:#55b7f3;   
81
}
82
.btn-3da:after{
83
    width:100%;
84
    height:42%;
85
    left:0;
86
    top:-40%;
87
    background:#53a6d7;
88
    transform-origin:0% 100%;
89
    transform:rotateX(90deg);
90
   
91
    
92
}
93
.btn-3da:hover{
94
    transform: rotateX(-45deg);   
95
}
96
.btn-3db:after{
97
    width:100%;
98
    height:40%;
99
    left:0;
100
    top:100%;
101
    background:#53a6d7;
102
    transform-origin: 0% 0%;
103
    transform:rotateX(-90deg);
104
}
105
.btn-3db:hover{
106
    transform:rotateX(35deg);   
107
}
108
.btn-3dc:after{
109
    width:20%;
110
    height:100%;
111
    left:-20%;
112
    top:0;
113
    background:#53a6d7;
114
    -webkit-transform-origin:100% 0%;
115
    -webkit-transform:rotateY(-90deg);
116
    -moz-transform-origin:100% 0%;
117
    -moz-transform:rotateY(-90deg);
118
    -ms-transform-origin:100% 0%;
119
    -ms-transform:rotateY(-90deg);
120
    transform-origin:100% 0%;
121
    transform:rotateY(-90deg);
122
}
123
.btn-3dc:hover{
124
    transform:rotateY(25deg);   
125
}
126
.btn-3dd:after{
127
    width:20%;
128
    height:100%;
129
    left:100%;
130
    top:0;
131
    background:#53a6d7;
132
    -webkit-transform-origin:0% 0%;
133
    -webkit-transform:rotateY(90deg);
134
    -moz-transform-origin:0% 0%;
135
    -moz-transform:rotateY(90deg);
136
    -ms-transform-origin:0% 0%;
137
    -ms-transform:rotateY(90deg);
138
    transform-origin:0% 0%;
139
    transform:rotateY(90deg);
140
}
141
.btn-3dd:hover{
142
    -webkit-transform:rotateY(-15deg);
143
    -moz-transform:rotateY(-15deg);
144
    -ms-transform:rotateY(-15deg);
145
    transform:rotateY(-15deg);
146
}
147
 
148
 
149
@media screen and (max-width:480px){
150
    .container{
151
        font-size:1.2em;   
152
    }
153
}
154
 
155
 
156
 
 

Animated 3D buttons

CSSDeck G+