• HTML
• CSS

HTML

<div class="main-box">
    <input type="checkbox" id="check">
    <label for="check">Share</label>
    <div class="icons">
        <a href="#"><i class="icon-facebook-circled"></i></a>
        <a href="#"><i class="icon-twitter"></i></a>
        <a href="#"><i class="icon-instagram"></i></a>
        <a href="#"><i class="icon-youtube-play"></i></a>
    </div>
</div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}
body{
    background:#0984e3;
}
.main-box{
    position:absolute;
    left:50%;
    top:60%;
    transform:translate(-50%,-50%);
}
.main-box label{
    position:relative;
    background:#fff;
    height:50px;
    width:150px;
    border-radius:35px;
    display:block;
    text-align:center;
    line-height:50px;
    font-size:22px;
    font-weight:500;
    text-transform:uppercase;
    color:#0984e3;
    cursor:pointer;
    box-shadow:0 0 4px rgba(0,0,0,0.5);
    transition:all 0.3s ease;
}
.main-box label:before{
    content:"Cancel";
    position:absolute;
    height:100%;
    width:100%;
    left:0;
    top:0;
    background:#fff;
    border-radius:35px;
    opacity:0;
    pointer-events:none;
}
.main-box label:hover{
    letter-spacing:1px;
}
#check{
    display:none;
}
#check:checked ~ label:before{
    opacity:1;
    pointer-events:auto;
}
.icons{
    position:absolute;
    top:-120px;
    left:50%;
    transform:translateX(-50%);
    background:#fff;
    height:110%;
    width:140%;
    display:flex;
    justify-content:space-evenly;
    align-items:center;
    border-radius:35px;
    box-shadow:0 0 4px rgba(0,0,0,0.5);
    opacity:0;
    pointer-events:none;
    transition:all 0.3s ease;
}
.icons::before{
    position:absolute;
    content:'';
    height:18px;
    width:18px;
    background:#fff;
    bottom:-9px;
    transform:rotate(45deg);
}
#check:checked ~ .icons{
    opacity:1;
    pointer-events:auto;
    top:-84px;
}
.icons a{
    font-size:22px;
    color:#0984e3;
    transition:all 0.3s ease;
}
.icons a:hover{
    transform:translateX(-2px);
}
.icons a:nth-child(1):hover{
    color:#426782;
}
.icons a:nth-child(2):hover{
    color:#1da1f2;
}
.icons a:nth-child(3):hover{
    color:#e1306c;
}
.icons a:nth-child(4):hover{
    color:#ff0000;
}

/*

  All the credits: https://www.youtube.com/watch?v=lw7RNxt_JFY&list=PLImJ3umGjxdD-ix6iyUEWgsPT2GkAMwyX&index=8 
  The icons were modified by fontello
  
*/