<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
  
<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>

   
</div>

body
{
  margin:0;
  padding:0;
      background-color: #efefef;
    background-image: url(https://images.unsplash.com/photo-1491947153227-33d59da6c448?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1400&q=80);
    background-position: center;
    background-size: 100%;
}

.container{
  overflow:hidden;
  height:auto;
  width:100%;
}

.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;
    border: 1px solid #dedede;
}

.circle {
    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;
}

.center:hover .circle
{
animation: rotating 2s 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;
}