* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #f5f5f5;
}

ul {
    position: relative;
    display: flex;
}

ul li {
    position: relative;
    list-style: none;
}

ul li a {
    position: relative;
    width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    background:#fff;
    margin: 0 10px;
    text-decoration: none;
    font-size: 30px;
    border-radius: 50%;
    color: #e2e2e2;
    box-shadow: inset -1px -1px 2px rgba(0, 0, 0, 0.2),
                2px -2px 5px rgba(0, 0, 0, 0.2);
    transition: .5s cubic-bezier(0, 0, 0, 1.8);
}

ul li a:hover {
    /* color: #999; */
    transform: translateY(-20px);
    box-shadow: inset -1px -1px 2px rgba(0, 0, 0, 0.2),
                2px 24px 10px rgba(0, 0, 0, 0.1);
}


/* ############ .fa é o nome da class mesmo ############ */
/* ############ Cor da letra SVG ############ */
ul li a .fa{      
    color: #fff;
    position: relative;
    z-index: 1;
}

ul li a::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, 0.1);
}

/* ############ facebook  ############ */
ul li:nth-child(1) a::before {
    background: #1777f2;
}

/* ############ twitter ############ */
ul li:nth-child(2) a::before {
    background: #1da1f2;
}

/* ############ whatsapp ############ */
ul li:nth-child(3) a::before {
    background: #25D366;
}

/* ############ instagram ############ */
ul li:nth-child(4) a::before {
    background: #C32AA3;
}

/* ############ weibo ############ */
ul li:nth-child(5) a::before {
    background: #ff0000;
}