<!-- thanks online tutorial on youtube with this css lesson. -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>icon effect</title>
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
</head>
<body>
    <ul>
        <li>
            <a href="#"><i class="fab fa-facebook-f"></i></a>
        </li>
        <li>
            <a href="#"><i class="fab fa-twitter"></i></a>
        </li>
        <li>
            <a href="#"><i class="fab fa-google-plus-g"></i></a>
        </li>
        <li>
            <a href="#"><i class="fab fa-linkedin-in"></i></a>
        </li>
        <li>
            <a href="#"><i class="fab fa-instagram"></i></a>
        </li>
    </ul>
    <p>Thanks online tutorial on youtube with this css lesson</p>
</body>
</html>
body{
    margin: 0;
    padding: 0;
    background:#ccc;
}

p{
  position: absolute;
  top:90%;
  left:40%;
  transform:translate(-50%;-50%);
}

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 .fab{
    font-size: 40px;
    color:#262626;
    line-height:80px;
    transition:.5s;
}

ul li a{
    position: relative;
    display:block;
    width:80px;
    height:80px;
    background:#fff;
    text-align: center;
    transform: perspective(100px) rotate(-30deg) skew(25deg) translate(0,0);
    transition:.5s;
    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: .5s;
    transform: rotate(0deg) skewX(-45deg);
}

ul li a:hover{
    transform: perspective(100px) rotate(-30deg) skew(25deg) translate(20px,-20px);
    box-shadow:-50px 50px 50px rgba(0,0,0,.5);
}

ul li:hover .fab{
    color:#fff;
}

ul li:hover:nth-child(1) a {
    background:#3b5999;
}
ul li:hover:nth-child(1) a:before {
    background:#2e4a86;
}
ul li:hover:nth-child(1) a:after {
    background:#4a69ad;
}

ul li:hover:nth-child(2) a {
    background:#55acee;
}
ul li:hover:nth-child(2) a:before {
    background:#4184b7;
}
ul li:hover:nth-child(2) a:after {
    background:#4d9fde;
}

ul li:hover:nth-child(3) a {
    background:#dd4b39;
}
ul li:hover:nth-child(3) a:before {
    background:#c04526;
}
ul li:hover:nth-child(3) a:after {
    background:#d65939;
}

ul li:hover:nth-child(4) a {
    background:#0077b5;
}
ul li:hover:nth-child(4) a:before {
    background:#026499;
}
ul li:hover:nth-child(4) a:after {
    background:rgb(3, 134, 204);
}

ul li:hover:nth-child(5) a {
    background:#eff05f;
}
ul li:hover:nth-child(5) a:before {
    background:#d4d452;
}
ul li:hover:nth-child(5) a:after {
    background:#e4e464;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.