<nav class="circle-menu">
  <label for="toggle" class="fa fa-share-alt"/> 
  <input type="checkbox" id="toggle"/>

  <menu>
    <a href="#"><li class="fa fa-facebook"></li></a>
    <a href="#"><li class="fa fa-linkedin"></li></a>
    <a href="#"><li class="fa fa-google-plus"></li></a>
    <a href="#"><li class="fa fa-twitter"></li></a>
  </menu>
</nav>

@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css);
body{
  background-color:#225;
}
.circle-menu {
  font-face: FontAwesome;
  font-size: 20px;
  display: flex;
  justify-content: lefts;
}

.fa-share-alt:before{
  position: absolute;
  left:0;
  top:0;
  background-color: #fff;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, .5);
  background-image:radial-gradient(circle at 0 0 ,white 50%,rgba(55,55,155,1));
  text-shadow:2px 2px 2px rgba(0, 0, 2, .5);
  color:#258;
  width: 1.8em;
  height: 1.8em;
  font-size: 2em;
  padding: .5em;
  border-radius:0% 0% 100% 0%;
}

.circle-menu label {
  position: relative;
  cursor: pointer;
  z-index: 200;
}

.circle-menu input[type="checkbox"] {
  display: none;
}

.circle-menu input[type="checkbox"]:checked~menu li {
  left: 0em;
  top: 0em;
  z-index: -1;
  opacity: 0;
  border-radius: 0% 10% 1000% 10%;
}

.circle-menu menu {
  list-style: none;
  width:100px;
  height: 100px;
  position: relative;
}

.circle-menu li {
  position: absolute;
  display: block;
  width: 1em;
  height: 1em;
  font-size: 1.3em;
  padding: .7em;
  border-radius:50%;
  text-align: center;
  transition: all 1s;
  opacity: 1;
  z-index: -1;
  background-color:white;
  text-shadow:2px 2px 2px rgba(0, 0, 2, .5);
}

.circle-menu a:nth-child(1) li {
  color: #007;
  left: 5em;
  top: 0em;
  transition-delay: 0s;
  box-shadow: 6px 0px 10px rgba(0, 0, 0, .5);
}

.circle-menu a:nth-child(2) li{
   color: #00a;
  left: 4.2em;
  top: 2.45em;
  transition-delay: .2s;
  box-shadow: 5.5px 3.2px 10px rgba(0, 0, 0, .5);
}

.circle-menu a:nth-child(3) li{
  color: #a00;
  left: 2.45em;
  top: 4.25em;
  transition-delay: .4s;
  box-shadow: 3.2px 5.5px 10px rgba(0, 0, 0, .5);
}

.circle-menu a:nth-child(4) li{
  color: #55f;
  left: 0em;
  top: 5em;
  transition-delay: .6s;
  box-shadow: 0px 6px 10px rgba(0, 0, 0, .5);
}