<html>
<head>
  <meta http-equiv="content-type" content="text/html" />
  <meta name="author" content="RAMStudio" />

  <title>icon</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
</head>

<body>

  
  <ul>
    <li><a href=""><i class="fa fa-youtube" aria-hidden="true"></i></a></li>
    <li><a href=""><i class="fa fa-bitbucket" aria-hidden="true"></i></i></a></li>
    <li><a href=""><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
    <li><a href=""><i class="fa fa-tumblr" aria-hidden="true"></i></a></li>
    <li><a href=""><i class="fa fa-skype" aria-hidden="true"></i></a></li>
    <li><a href=""><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
    <li><a href=""><i class="fa fa-github" aria-hidden="true"></i></a></li>
    <li><a href=""><i class="fa fa-pinterest" aria-hidden="true"></i></a></li>
  </ul>


</body>
</html>
body
{
  margin:0;
  padding:0;
  background:#ccc;
}
ul
{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  margin:0;
  padding:0;
  display:flex;
}
ul li
{
  list-style:none;
  margin:0 40px;
}
ul li a .fa
{
  font-size:40px;
  color:#262626;
  line-height:60px;
  transition:.5s;
}
ul li a 
{
  position:relative;
  display:block;
  width:60px;
  height:60px;
  background:#fff;
  text-align:center;
  transform: perspective(1000px) rotate(-30deg) skew(25deg) translate(0,0);
  transition:.5s;
  transition-timing-function: linear;
  box-shadow:-20px 20px 10px rgba(0,0,0,.5);
}
ul li a:before
{
  content:'';
  position:absolute;
  top:10px;
  left:-20px;
  height:100%;
  width:20px;
  background:#b1b1b1;
  transition: .5s;
  transform: rotate(0deg) skewY(-45deg);
}
ul li a:after
{
  content:'';
  position:absolute;
  bottom:-20px;
  left:-10px;
  height:20px;
  width:100%;
  background:#b1b1b1;
  transition: .85s;
  transform: rotate(0deg) skewX(-45deg);
}
ul li a:hover
{
  transform: perspective(1000px) rotate(-30deg) skew(25deg) translate(20px,-20px);
  box-shadow:-50px 50px 50px rgba(0,0,0,.5);
}
ul li:hover .fa
{
  color:#fff;
}
/* youtube */
ul li:hover:nth-child(1) a
{
  background: #cd201f;
}
ul li:hover:nth-child(1) a:before
{
  background: #930504;
}
ul li:hover:nth-child(1) a:after
{
  background: #e62c2a;
}

/* bitbucket */
ul li:hover:nth-child(2) a
{
  background: #0084ff;
}
ul li:hover:nth-child(2) a:before
{
  background: #145dc6;
}
ul li:hover:nth-child(2) a:after
{
  background: #1170f9;
}

/* instagram */
ul li:hover:nth-child(3) a
{
  background: #e4405f;
}
ul li:hover:nth-child(3) a:before
{
  background: #cb1d3d;
}
ul li:hover:nth-child(3) a:after
{
  background: #ad344a;
}

/* tumblr */
ul li:hover:nth-child(4) a
{
  background: #34465d;
}
ul li:hover:nth-child(4) a:before
{
  background: #253244;
}
ul li:hover:nth-child(4) a:after
{
  background: #40536b;
}

/* skype */
ul li:hover:nth-child(5) a
{
  background: #00AFF0;
}
ul li:hover:nth-child(5) a:before
{
  background: #166e9b;
}
ul li:hover:nth-child(5) a:after
{
  background: #3c8eb9;
}

/* facebook */
ul li:hover:nth-child(6) a
{
  background: #3b5999;
}
ul li:hover:nth-child(6) a:before
{
  background: #2c3e64;
}
ul li:hover:nth-child(6) a:after
{
  background: #516aa5;
}

/* github */
ul li:hover:nth-child(7) a
{
  background: #4b4e58;
}
ul li:hover:nth-child(7) a:before
{
  background: #28292a;
}
ul li:hover:nth-child(7) a:after
{
  background: #5c5f6d;
}

/* pinterest */
ul li:hover:nth-child(8) a
{
  background: #bd081c;
}
ul li:hover:nth-child(8) a:before
{
  background: #930011;
}
ul li:hover:nth-child(8) a:after
{
  background: #bb2a3a;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.