"CSS3 3d flip button"
Bootstrap 3.3.0 Snippet by rasheedbhutto

1
2
3
4
5
6
7
8
9
10
11
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<a href="#id" class="flipper-container">
<div id="id" class="flipper">
<div class="front-face" data-icon="➣"><span data-hover="Clicked">Click Me</span></div>
<div class="back-face" data-icon="✓">Thank You</div>
</div>
</a>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@import url(http://fonts.googleapis.com/css?family=Montserrat:400);
body {
background-color: #777;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAQAAABuBnYAAAAAU0lEQVQIHQXBwRGDIBAAwO2/AMcCDHAcPjIRxjJ8Je1kl1uqUgphsWu6w0sIG6npLpcUBql4e/wsVRKabrkNTacIYbMrwsF06rqUhsnXVKVT+Hj+Ue4rPSONk4kAAAAASUVORK5CYII=);
padding-top: 80px;
text-align: center;
}
.flipper-container {
text-align: center;
margin-top: 40px;
-moz-perspective: 1000;
-webkit-perspective: 1000;
perspective: 1000;
}
.flipper {
display: inline-block;
position: relative;
text-decoration: none;
font-family: 'Montserrat', arial, sans-serif;
font-weight: 400;
text-transform: uppercase;
width: 11em;
height: 4.5em;
background-color: #282828;
box-shadow: 0 3px 5px #282828;
-moz-transition: all 0.6s cubic-bezier(0.37, 0.74, 0.15, 1.65);
-o-transition: all 0.6s cubic-bezier(0.37, 0.74, 0.15, 1.65);
-webkit-transition: all 0.6s cubic-bezier(0.37, 0.74, 0.15, 1.65);
transition: all 0.6s cubic-bezier(0.37, 0.74, 0.15, 1.65);
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.flipper:target {
-moz-transform: rotateX(90deg);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: