body{
    margin: 0px;
    padding: 0px;
}
.animated-social-button-wrapper{
    position: relative;
    height: 300px;
    width: 100%;
    background-color: #ededed;
}
.animated-social-button{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    text-align: center;
}

.animated-btn{
    margin: 10px;
    background-color: #f1f1f1;
    display: inline-block;
    width: 90px;
    height: 90px;
    box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, .7);
    border-radius: 30px;
    position: relative;
    overflow: hidden;
    
}
.animated-btn i{
    font-size: 30px;
    line-height: 90px;
    transition: .2s linear;
}
.animated-btn:hover i{
    transform: scale(1.30);
    color: #f1f1f1;
}
.animated-btn::before{
    content: "";
    position: absolute;
    width: 120%;
    height: 120%;
    transform: rotate(45deg);
    top: 90%;
    left: -110%;
}
.animated-btn:hover::before{
    animation: btnAnimation 0.7s  1 ;
    top: -10%;
    left: -10%;
}
.btn-facebook{
    color: #3b5999;
}
.btn-twitter{
    color: #55acee;
}
.btn-linkedin{
    color: #0077B5;
}
.btn-youtube{
    color: #cd201f;
}
.btn-google-plus{
    color: #dd4b39;
}

.btn-facebook::before{
    background-color: #3b5999;
}
.btn-twitter::before{
    background-color: #55acee;
}
.btn-linkedin::before{
    background-color: #0077B5;
}
.btn-youtube::before{
    background-color: #cd201f;
}
.btn-google-plus::before{
    background-color: #dd4b39;
}

@keyframes btnAnimation{
    0%{
        top: 90%;
        left: -110%;
    }50%{
        top: -30%;
        left: 10%;
    }100%{
        top: -10%;
        left: -10%;
    }
}