body{
    margin:0;
    padding:0;
    display:flex;
    justify-content: center;
    align-items: center;
    background:#1b141a;
    min-height:100vh;
}

ul{
    margin:0;
    padding:0;
    display:flex;
}

ul li{
    position:relative;
    list-style:none;
    width:100px;
    height:100px;
    margin:0 10px;
    border-radius:50%;
    box-sizing:border-box;
    /* background:#fff; */
}

ul li:before,
ul li:after{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:#000;
    border-radius:50%;
    filter: blur(20px);
    opacity:0;
    transition:1s;
    z-index:-1;

}
ul li:after{
    filter: blur(40px);
}

ul li:hover:before,
ul li:hover:after{
    opacity:1;
}
ul li a{
    position:absolute;
    top:10px;
    left:10px;
    right:10px;
    bottom:10px;
    text-align:center;
    line-height:80px;
    color:#fff;
    background:#000;
    font-size:36px;
    border-radius:50%;
}

ul li a .fa{
    text-shadow: 0 2px 5px rgba(0,0,0,.2);
    transition:.5s;
    transform: rotateY(0deg) scale(0.8);
    opacity:0.2;
}

ul li a:hover .fa{
    opacity:1;
    transform:scale(1.2);
}

ul li:nth-child(1) a,
ul li:nth-child(1):before,
ul li:nth-child(1):after{

    background:linear-gradient(45deg, #ff0057, #e64a19);
}

ul li:nth-child(2) a,
ul li:nth-child(2):before,
ul li:nth-child(2):after{

    background:linear-gradient(45deg, #89ff00, #00bcd4);
}

ul li:nth-child(3) a,
ul li:nth-child(3):before,
ul li:nth-child(3):after{

    background:linear-gradient(45deg, #e91e63, #5d02ff);
}

ul li:nth-child(4) a,
ul li:nth-child(4):before,
ul li:nth-child(4):after{

    background:linear-gradient(45deg, #ff0000, #ffc107);
}