• HTML
• CSS

HTML

<link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;1,400;1,500&display=swap" rel="stylesheet" />

<div class="share">
    <h1 class="share__text"> SHARE<i class="ri-share-fill"></i></h1>
    
    <ul class="share__list">
        <li class="share__item">
            <a href="#"><i class="ri-github-fill"></i> Github</a>
        </li>
        
        <li class="share__item share__item--linkedin">
            <a href="#"><i class="ri-linkedin-box-fill"></i> LinkedIn</a>
        </li>
        
        <li class="share__item share__item--twitter">
            <a href="#"><i class="ri-twitter-fill"></i> Twitter</a>
        </li>
        
        <li class="share__item share__item--instagram">
            <a href="#"><i class="ri-instagram-fill"></i> Instagram</a>
        </li>
    </ul>
</div>

CSS

:root{
    /* CSS Variables */
    --color-red:#dd1616;
    --color-white:#fff;
    --color-border:rgba(209,209,209,0.815);
    --color-linkedin:linear-gradient(to top left,#0e76a8,#0a9ee2);
    --color-twitter:linear-gradient(to top left,#1da1f2,#0a9ee2);
    --color-insta:linear-gradient(to top left,#962fbf,#d62976);
    
}

*{
    padding:0;
    margin:0;
}

body{
    font-family:"Montserrat",sans-serif;
    font-weight:500;
    height:100vh;
    background-color:var(--color-red);
    display:flex;
    justify-content:center;
    align-items:center;
}

.share{
    width:12rem;
    height:4rem;
    background-color:var(--color-white);
    border-radius:4px;
    overflow:hidden;
    box-shadow:0 0 1rem rgba(0,0,0,.1);
    cursor:pointer;
    transition:width 0.5s 0.4s,height 0.5s;
}

.share:hover{
    transition:all 0.5s,width 0.5s ease-in-out,height 0.5s 0.4s ease-in-out;
    width:270px;
    height:320px;
    border-radius:4px;
}

.share__text{
    font-size:1.6rem;
    color:var(--color-red);
    padding:1.1rem 2rem;
    border-bottom:1px solid var(--color-border);
    display:flex;
    align-items:center;
}

.share__text i{
    margin-left:1rem;
}

.share__list{
    list-style:none;
    padding:1rem;
    opacity:0;
    transform:translateY(100px);
}

.share:hover .share__list{
    transition:all 0.3s 1s;
    opacity:1;
    transform:translateY(0);
}

.share__item{
    font-size:1rem;
    padding:1rem;
    background-image:linear-gradient(to top left,#111,#000);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.share__item:not(:last-child){
    border-bottom:1px solid var(--color-border);
}

.share__item a{
    text-decoration:none;
    display:flex;
    align-items:center;
}

.share__item i{
    margin-right:6px;
    font-size:1.4em;
}

.share__item--linkedin{
    background-image:var(--color-linkedin);
}

.share__item--twitter{
    background-image:var(--color-twitter);
}

.share__item--instagram{
    background-image:var(--color-insta);
}

/* All credits to: https://www.youtube.com/watch?v=U5e-7u7-23o */