<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="center">
            <i class="fa fa-share-alt"></i>
            <div class="circle">
                <ul>
                    <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                    <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                    <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                    <li><a href="#"><i class="fa fa-youtube"></i></a></li>
                </ul>
            </div>
        </div>

   <script 

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

i.fa-share-alt {
    background-color: #FFF;
    width: 110px;
    height: 110px;
    box-shadow: 0 0 15px 0 rgba(0,0,0,.1);
    border-radius: 50%;
    text-align: center;
    line-height: 110px;
    font-size: 1.8em;
    cursor: pointer;
    position: relative;
    color: #00bcd4;
}

.circle {
    display: none;
    width: 200px;
    height: 200px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -55;
    transform: translate(-22%, -22%) rotate(-45deg);
    border-right-width: 50px;
    border-right-color: #00bcd4;
    border-right-style: solid;

    border-top-width: 50px;
    border-top-color: transparent;
    border-top-style: solid;

    border-bottom-width: 50px;
    border-bottom-color: #00bcd4;
    border-bottom-style: solid;

    border-left-width: 50px;
    border-left-color: transparent;
    border-left-style: solid;
    box-sizing: border-box;
    border-radius: 200px;
    transform-origin: center;

    animation: rotating 1.5s cubic-bezier(.97, .11, .33, .6) forwards;
}

@keyframes rotating {
    from {
        transform: translate(-22%, -22%) rotate(360deg);
        filter: hue-rotate(360deg);
    }

    to {
        transform: translate(-22%, -22%) rotate(-45deg);
        filter: hue-rotate(0deg);
    }
}

.circle::before {
    content: '';
    display: block;
    width: 45px;
    height: 45px;
    background-color: #00bcd4;
    position: absolute;
    top: -28px;
    left: 82px;
    border-radius: 50%;
    z-index: -56
}


.circle::after {
    content: '';
    display: block;
    width: 45px;
    height: 45px;
    background-color: #00bcd4;
    position: absolute;
    bottom: -26px;
    left: -28px;
    border-radius: 50%;
    z-index: -56
}


ul {
    color: red;
    position: absolute;
    right: -60px;
    list-style: none;
}

ul li a {
    text-decoration: none;
}

ul li:nth-child(1) a i {
    transform: rotate(45deg);
    position: relative;
    top: -15px;
    left: -15px;
    width: 44px;
    height: 44px;
    text-align: center;
    line-height: 44px;
    border-radius: 50%;
    color: #FFF;
}


ul li:nth-child(2) a i {
    transform: rotate(45deg);
    position: relative;
    top: 1px;
    left: -18px;
    width: 44px;
    height: 44px;
    text-align: center;
    line-height: 44px;
    border-radius: 50%;
    color: #FFF;
}

ul li:nth-child(3) a i {
    transform: rotate(45deg);
    position: relative;
    top: -2px;
    left: -64px;
    width: 44px;
    height: 44px;
    text-align: center;
    line-height: 44px;
    border-radius: 50%;
    color: #FFF;
}

ul li:nth-child(4) a i {
    transform: rotate(45deg);
    position: relative;
    top: -52px;
    left: -123px;
    width: 44px;
    height: 44px;
    text-align: center;
    line-height: 44px;
    border-radius: 50%;
    color: #FFF;
}

ul li a i {
    transition: background-color .3s ease-out;

}


ul li a i:hover {
    background-color: #1cadbf;
}

 $(document).ready(function() {
                $('.fa-share-alt').on('click',function() {
                    if($('.circle').css('display') == 'none') {
                        $('.circle').css('display','block');
                    }else {
                        $('.circle').css('display','none');
                    }
                })
            })