• HTML
• CSS
• JS

HTML

<div class="menu">
    <li style="--i:1;--clr:#ff0000;">
        <a href="#"><ion-icon name="logo-youtube"></ion-icon></a>
    </li>
    <li style="--i:2;--clr:#1877f2;">
        <a href="#"><ion-icon name="logo-facebook"></ion-icon></a>
    </li>
    <li style="--i:3;--clr:#ea4c89;">
        <a href="#"><ion-icon name="logo-dribbble"></ion-icon></a>
    </li>
    <li style="--i:4;--clr:#25d366;">
        <a href="#"><ion-icon name="logo-whatsapp"></ion-icon></a>
    </li>
    <div class="toggle">
        <ion-icon name="share-social"></ion-icon>
        <ion-icon name="close-outline"></ion-icon>
    </div>
</div>

<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

CSS

*
{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
body
{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
    background:#412d72;
}
.menu
{
    position:relative;
    width:220px;
    height:220px;
    display:flex;
    justify-content:center;
    align-items:center;
}
.menu .toggle
{
    position:relative;
    width:100px;
    height:100px;
    border:1px solid rgba(255,255,255,0.1);
    border-radius:50%;
    box-shadow:0 25px 15px rgba(0,0,0,0.25),0 25px 20px rgba(0,0,0,0.1);
    backdrop-filter:blur(10px);
    display:flex;
    justify-content:center;
    align-items:center;
    cursor:pointer;
    font-size:3em;
    color:#fff;
    z-index:10000;
}
.menu .toggle ion-icon
{
    position:absolute;
    opacity:0;
    transition:0.5s;
}
.menu .toggle ion-icon:nth-child(1)
{
    opacity:1;
    transform:rotate(360deg);
}
.menu.active .toggle ion-icon:nth-child(1)
{
    opacity:0;
    transform:rotate(0deg);
}
.menu.active .toggle ion-icon:nth-child(2)
{
    opacity:1;
    transform:rotate(360deg);
}
.menu li 
{
    position:absolute;
    left:0;
    list-style:none;
    transform-origin:110px;
    transition:0.5s;
    transition-delay:calc(0.05s * var(--i));
    transform:rotate(calc(360deg / 4 * var(--i)));
    scale:0;
    z-index:1;
    border-radius:50%;
    overflow:hidden;
}
.menu li::before
{
    content:'';
    position:absolute;
    top:0;
    left:-30px;
    width:20px;
    height:100%;
    background:#fff;
    z-index:10;
    transform:skewX(325deg) translateX(0);
    box-shadow:-5px 0 0 #fff5;
    transition:0.5s;
}
.menu li:hover::before
{
    transform:skewX(325deg) translateX(180px);
    box-shadow:-50px 0 0 #fff5;
}
.menu.active li
{
    scale:1;
}
.menu li a
{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    width:80px;
    height:80px;
    background:var(--clr);
    color:#fff;
    font-size:2.25em;
    border-radius:50%;
    transform:rotate(calc(360deg / -4 * var(--i)));
    box-shadow:0 3px 4px rgba(0,0,0,0.15);
}

JS

let toggle = document.querySelector('.toggle');
let menu = document.querySelector('.menu');
toggle.onclick = function(){
    menu.classList.toggle('active');
}

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