• HTML
• CSS

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css"/>

<ul>
    <li>
        <a href="#" style="--icon:#e83028;">
            <i class="fa-brands fa-youtube"></i>
            <i class="fa-brands fa-youtube"></i>
        </a>
    </li>
    <li>
        <a href="#" style="--icon:#00abf0;">
            <i class="fa-brands fa-twitter"></i>
            <i class="fa-brands fa-twitter"></i>
        </a>
    </li>
    <li>
        <a href="#" style="--icon:#333333;">
            <i class="fa-brands fa-tiktok"></i>
            <i class="fa-brands fa-tiktok"></i>
        </a>
    </li>
    <li>
        <a href="#" style="--icon:#3b5998;">
            <i class="fa-brands fa-facebook-f"></i>
            <i class="fa-brands fa-facebook-f"></i>
        </a>
    </li>
</ul>

CSS

*{
    margin:0;
    padding:0;
}
body{
    display:flex;
    justify-content:center;
    align-items:center;
    height:100vh;
}
ul{
    display:flex;
    flex-direction:row;
}
ul li{
    list-style:none;
}
ul li a{
    position:relative;
    display:block;
    width:60px;
    height:60px;
    background:var(--icon);
    color:#fff;
    text-align:center;
    margin:0 10px;
    box-shadow:0 0 0 3px var(--icon);
    overflow:hidden;
    border-radius:50%;
}
ul li a i.fa-brands{
    position:relative;
    font-size:30px;
    width:100%;
    height:100%;
    line-height:60px;
    transition:0.5s;
}
ul li a:hover i.fa-brands{
    transform:translateY(-100%);
    color:var(--icon);
}
ul li a:before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:#fff;
    transform-origin:top;
    transform:scaleY(0);
    transition:transform 0.5s;
}
ul li a:hover:before{
    transform:scaleY(1);
}