<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>
@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);
-webkit-transform: rotateX(90deg);
transform: rotateX(90deg);
}
.front-face, .back-face {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
padding-right: 70px;
letter-spacing: 2px;
line-height: 4.5em;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.front-face:before, .back-face:before {
content: attr(data-icon);
font-size: 30px;
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 70px;
border-radius: 0 2px 2px 0;
}
.front-face {
background-color: #fc2161;
color: #fff;
text-shadow: 0 1px 1px #b50236;
-moz-transform: rotateX(0deg) translateZ(2.25em);
-ms-transform: rotateX(0deg) translateZ(2.25em);
-webkit-transform: rotateX(0deg) translateZ(2.25em);
transform: rotateX(0deg) translateZ(2.25em);
}
.front-face:before {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjEuMCIgeDI9IjEuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2NlMDMzZSIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZWIxZjU2Ii8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmOTE4NTgiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmYzIxNjEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
background-size: 100%;
background-image: -moz-linear-gradient(45deg, #ce033e 0%, #eb1f56 50%, #f91858 50%, #fc2161);
background-image: -webkit-linear-gradient(45deg, #ce033e 0%, #eb1f56 50%, #f91858 50%, #fc2161);
background-image: linear-gradient(45deg, #ce033e 0%, #eb1f56 50%, #f91858 50%, #fc2161);
}
.back-face {
background-color: #77BD42;
color: #53842e;
-moz-transform: rotateX(-90deg) translateZ(2.25em);
-ms-transform: rotateX(-90deg) translateZ(2.25em);
-webkit-transform: rotateX(-90deg) translateZ(2.25em);
transform: rotateX(-90deg) translateZ(2.25em);
}
.back-face:before {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjEuMCIgeDI9IjEuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUzODQyZSIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjNzZiYzQyIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiM3ZGJkNGMiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3N2JkNDIiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
background-size: 100%;
background-image: -moz-linear-gradient(45deg, #53842e 0%, #76bc42 50%, #7dbd4c 50%, #77bd42);
background-image: -webkit-linear-gradient(45deg, #53842e 0%, #76bc42 50%, #7dbd4c 50%, #77bd42);
background-image: linear-gradient(45deg, #53842e 0%, #76bc42 50%, #7dbd4c 50%, #77bd42);
}
