• HTML
• CSS

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="social-media-container">
    <h2>Follow Us On</h2>
    <div class="border"></div>
    <div class="social-media-buttons">
        <a href="#"><i class="fab fa-facebook-f"></i></a>
        <a href="#"><i class="fab fa-twitter"></i></a>
        <a href="#"><i class="fab fa-instagram"></i></a>
        <a href="#"><i class="fab fa-linkedin-in"></i></a>
        <a href="#"><i class="fab fa-tiktok"></i></a>
    </div>
</div>

CSS

body{
    margin:0;
    padding:0;
    background-color:#D6CDEA;
    height:100vh;
    font-family:"Montserrat", sans-serif;
    display:flex;
    align-items:center;
    justify-content:center;
}

.social-media-container{
    display:flex;
    align-items:center;
    gap:20px;
}

.social-media-container h2{
    color:#2e3749;
    font-size:22px;
    font-weight:600;
    cursor:pointer;
}

.border{
    width:120px;
    height:3px;
    position:relative;
}

.border::before{
    content:"";
    position:absolute;
    height:3px;
    width:40px;
    background-color:#2e3749;
    transition:.3s linear;
}

.social-media-container:hover .border::before{
    width:100%;
}

.social-media-buttons a{
    display:inline-block;
    color:#2e3749;
    font-size:24px;
    margin-right:20px;
    pointer-events:none;
    transition:.5s;
    opacity:0;
}

.social-media-buttons a:nth-child(odd){
    transform:translateY(-40px);
}

.social-media-buttons a:nth-child(even){
    transform:translateY(40px);
}

.social-media-container:hover .social-media-buttons a{
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
}

/*
    All the credits to: https://www.youtube.com/watch?v=bxyxuLwTRPY
*/