body{
    margin: 0px;
    padding: 0px;
}
.button-one{
    background-color: #ccc;
    padding: 100px 0px;
    position: relative;
}

.button-one ul{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0px;
    padding: 0px;
    display: -webkit-box;  
    display: -ms-flexbox;  
    display: -webkit-flex; 
    display: flex;
}
.button-one ul li{
    list-style: none;
    margin: 0px 40px;
}
.button-one ul li a span i.fab{
    font-size: 40px;
    color:#262626;
    line-height: 80px;
}
.button-one ul li a{
    position: relative;
    display: block;
    height: 80px;
    width: 80px;
    background-color: #fff;
    text-align: center;
    transform: perspective(1000px) rotate(-30deg) skew(25deg) translate(0,0);
    transition: .5s;
    box-shadow: -20px 20px 10px rgba(0, 0, 0, .5);
}
.button-one ul li a::before{
    content: "";
    position: absolute;
    top: 10px;
    left: -20px;
    height: 100%;
    width: 20px;
    background-color: #b1b1b1;
    transition: .5s;
    transform: rotate(0deg) skewY(-45deg);
}
.button-one ul li a::after{
    content: "";
    position: absolute;
    bottom: -20px;
    left: -10px;
    height: 20px;
    width: 100%;
    background-color: #b1b1b1;
    transition: .5s;
    transform: rotate(0deg) skewX(-45deg);
}
.button-one ul li a:hover{
    transform: perspective(1000px) rotate(-30deg) skew(25deg) translate(20px, -20px);
    box-shadow: -50px 50px 50px rgba(0, 0, 0, .5);
}
.button-one ul li:hover .fab{
    color: #fff;
}

/* facebook */
.button-one ul li:hover:nth-child(1) a{
    background-color:#3b5999;
}
.button-one ul li:hover:nth-child(1) a::before{
    background-color:#2d4880;
}
.button-one ul li:hover:nth-child(1) a::after{
    background-color:#5479c7;
}


/* twitter */
.button-one ul li:hover:nth-child(2) a{
    background-color:#55acee;
}
.button-one ul li:hover:nth-child(2) a::before{
    background-color:#1273bd;
}
.button-one ul li:hover:nth-child(2) a::after{
    background-color:#81bce8;
}


/* linkedin */
.button-one ul li:hover:nth-child(3) a{
    background-color:#0077B5;
}
.button-one ul li:hover:nth-child(3) a::before{
    background-color:#0d5e88;
}
.button-one ul li:hover:nth-child(3) a::after{
    background-color:#2c92c7;
}

/* youtube */
.button-one ul li:hover:nth-child(4) a{
    background-color:#cd201f;
}
.button-one ul li:hover:nth-child(4) a::before{
    background-color:#983232;
}
.button-one ul li:hover:nth-child(4) a::after{
    background-color:#e81b1a;
}



/* google plus */
.button-one ul li:hover:nth-child(5) a{
    background-color:#dd4b39;
}
.button-one ul li:hover:nth-child(5) a::before{
    background-color:#bd1e0a;
}
.button-one ul li:hover:nth-child(5) a::after{
    background-color:#f54040;
}