• HTML
• CSS

HTML

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

<div class="share-button">
    <span><i class="fas fa-share-alt"></i> Share!</span>
    <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>
</div>

CSS

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

.share-button{
    width:280px;
    height:80px;
    background:#dfe6e9;
    border-radius:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    position:relative;
    cursor:pointer;
    transition:.3s linear;
}

.share-button:hover{
    transform:scale(1.1);
}

.share-button span{
    position:absolute;
    width:100%;
    height:100%;
    background:#2d3436;
    color:#f1f1f1;
    text-align:center;
    line-height:80px;
    z-index:999;
    transition:.6s linear;
    border-radius:40px;
    font-size:23px;
    /*opacity:0;*/
}

.share-button:hover span{
    transform:translateX(-100%);
    transition-delay:.3s;
}

.share-button a{
    flex:1;
    font-size:26px;
    color:#2d3436;
    text-align:center;
    transform:translateX(-100%);
    opacity:0;
    transition:0.3s linear;
}

.share-button:hover a{
    opacity:1;
    transform:translateX(0);
}

.share-button a:nth-of-type(1){
    transition-delay:1s;
}

.share-button a:nth-of-type(2){
    transition-delay:0.8s;
}

.share-button a:nth-of-type(3){
    transition-delay:0.6s;
}

.share-button a:nth-of-type(4){
    transition-delay:0.4s;
}

/* All credits to: https://www.youtube.com/watch?v=uiBwb1MoRno&list=PL_t969ALyXznfLjRWuj3ObY33mbpaRPUP&index=9 */