logo DevAnswer - Developers Answer

Flip Effect Code for Social Buttons

30th October

Preview


Source Code
                            <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.devanswer.com -->


<style>
@charset "UTF-8";
@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
html, body {
  margin: 0;
  padding: 0;
  background: #f1deb9;
}
.tiles {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 750px;
  height: 450px;
  perspective: 1000px;
}
.col {
  position: relative;
  float: left;
  margin: 6px;
  width: calc(150px - 12px);
  height: calc(150px - 12px);
}
.col a {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.col a:nth-child(1) {
  -webkit-clip-path: polygon(0 0, 100% 0, 50% 50%);
  clip-path: polygon(0 0, 100% 0, 50% 50%);
}
.col a:nth-child(2) {
  -webkit-clip-path: polygon(100% 0, 100% 100%, 50% 50%);
  clip-path: polygon(100% 0, 100% 100%, 50% 50%);
}
.col a:nth-child(3) {
  -webkit-clip-path: polygon(0 100%, 50% 50%, 100% 100%);
  clip-path: polygon(0 100%, 50% 50%, 100% 100%);
}
.col a:nth-child(4) {
  -webkit-clip-path: polygon(0 0, 50% 50%, 0 100%);
  clip-path: polygon(0 0, 50% 50%, 0 100%);
}
.col a:hover {
  z-index: 3;
  -webkit-clip-path: none;
  clip-path: none;
}
.col a:nth-child(1):hover ~ .box {
  transform: rotateX(180deg);
}
.col a:nth-child(2):hover ~ .box {
  transform: rotateY(180deg);
}
.col a:nth-child(3):hover ~ .box {
  transform: rotateX(-180deg);
}
.col a:nth-child(4):hover ~ .box {
  transform: rotateY(-180deg);
}
.col a:nth-child(1):hover ~ .box:after, .col a:nth-child(3):hover ~ .box:after {
  transform: rotateX(-180deg);
}
.col a:nth-child(2):hover ~ .box:after, .col a:nth-child(4):hover ~ .box:after {
  transform: rotateY(-180deg);
}
.col .box {
  position: absolute;
  width: 100%;
  height: 100%;
  font-family: "Open Sans", sans-serif;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  transform-style: preserve-3d;
  transition: transform 0.3s ease-in-out;
}
.col .box:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFF;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: 40px;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  border-radius: 2px;
  z-index: 2;
  backface-visibility: hidden;
}
.col .box:after {
  content: "Hi!";
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #333;
  color: #FFF;
  font-size: 48px;
  border-radius: 2px;
  transition-delay: 0.15s;
}
.col:nth-child(1) .box:before {
  content: "";
  background: #3f51b5;
}
.col:nth-child(1) .box:after {
  background: #3f51b5;
}
.col:nth-child(2) .box:before {
  content: "";
  background: #1da1f2;
}
.col:nth-child(2) .box:after {
  background: #1da1f2;
}
.col:nth-child(3) .box:before {
  content: "";
  background: #dc4a38;
}
.col:nth-child(3) .box:after {
  background: #dc4a38;
}
.col:nth-child(4) .box:before {
  content: "";
  background: #006699;
}
.col:nth-child(4) .box:after {
  background: #006699;
}
.col:nth-child(5) .box:before {
  content: "";
  background: #36465d;
}
.col:nth-child(5) .box:after {
  background: #36465d;
}
.col:nth-child(6) .box:before {
  content: "";
  background: #f16528;
}
.col:nth-child(6) .box:after {
  background: #f16528;
}
.col:nth-child(7) .box:before {
  content: "";
  background: #0170ba;
}
.col:nth-child(7) .box:after {
  background: #0170ba;
}
.col:nth-child(8) .box:before {
  content: "";
  background: #21759b;
}
.col:nth-child(8) .box:after {
  background: #21759b;
}
.col:nth-child(9) .box:before {
  content: "";
  background: #323131;
}
.col:nth-child(9) .box:after {
  background: #323131;
}
.col:nth-child(10) .box:before {
  content: "";
  background: #000000;
}
.col:nth-child(10) .box:after {
  background: #000000;
}
.col:nth-child(11) .box:before {
  content: "";
  background: #fec540;
}
.col:nth-child(11) .box:after {
  background: #fec540;
}
.col:nth-child(12) .box:before {
  content: "";
  background: #ef8043;
}
.col:nth-child(12) .box:after {
  background: #ef8043;
}
.col:nth-child(13) .box:before {
  content: "";
  background: #2c74be;
}
.col:nth-child(13) .box:after {
  background: #2c74be;
}
.col:nth-child(14) .box:before {
  content: "";
  background: #409ed4;
}
.col:nth-child(14) .box:after {
  background: #409ed4;
}
.col:nth-child(15) .box:before {
  content: "";
  background: #cc0f15;
}
.col:nth-child(15) .box:after {
  background: #cc0f15;
}
</style>

</head>
<body>
<div class='tiles'>
  <div class='col'>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <div class='box'></div>
  </div>
  <div class='col'>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <div class='box'></div>
  </div>
  <div class='col'>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <div class='box'></div>
  </div>
  <div class='col'>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <div class='box'></div>
  </div>
  <div class='col'>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <div class='box'></div>
  </div>
  <div class='col'>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <div class='box'></div>
  </div>
  <div class='col'>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <div class='box'></div>
  </div>
  <div class='col'>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <div class='box'></div>
  </div>
  <div class='col'>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <div class='box'></div>
  </div>
  <div class='col'>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <div class='box'></div>
  </div>
  <div class='col'>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <div class='box'></div>
  </div>
  <div class='col'>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <div class='box'></div>
  </div>
  <div class='col'>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <div class='box'></div>
  </div>
  <div class='col'>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <div class='box'></div>
  </div>
  <div class='col'>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <div class='box'></div>
  </div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>

</body>
</html>



Other Codes

Radio Social Buttons Code


Radio Social Buttons Code

In this post, we have some radio buttons. These radio buttons belong to any social network. Social icons are also displayed by clicking the share button.
Flying Social Buttons Icons on Background


Flying Social Buttons Icons on Background

In this code, there are 4 icons of social buttons in the middle of the page. By placing the mouse on one of them, the social button in the background . . .
HTML Social Buttons on Sidebar with Followers . . .


HTML Social Buttons on Sidebar with Followers . . .

In this code, social buttons are located next to the page. Normally, 4 buttons are displayed. By clicking on the more option, the other buttons are also . . .
Sliding Social Buttons Code


Sliding Social Buttons Code

In this code we have 4 social buttons. These buttons have a hover effect. Each button at the time of hovering pulls back the drawer next to it and can . . .