Code: Flipping Button by Clicking

Buttons should have two sides. I mean they should change when they are clicked. This code adds this ability to the buttons. When you click on a button, its text and color will change. It is called flipping button.
<!-- this script got from www.cssfreecode.com -->
<html><head>
      <style>
      @import url(http://cssfreecode.com/view/files/1134_font.css);
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);
}

    </style>

  <script>
  window.console = window.console || function(t) {};
</script>

  
  
  <script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>


</head>

<body translate="no" >

  <a href="#id" class="flipper-container">
  <div id="id" class="flipper">
    <div class="front-face" data-icon="&#x27a3;"><span data-hover="Clicked">Click Me</span></div>
    <div class="back-face" data-icon="&#10003;">Thank You</div>
  </div>
</a>
    

  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

</body>

</html>
 
<font face="Tahoma"><a target="_blank" href="http://www.cssfreecode.com/"><span style="font-size: 8pt; text-decoration: none">CSS Free Code</span></a></font>
If you don't know how to use this code or need more information Click here!

	You can leave comments once you sign in/up.
CSS Best Codes

Code: Flipping Button by Clicking

You can leave comments once you sign in/up.

Links
