<body>
  <h1>Hover & click!</h1>
  <h2>Sticky share button</h2>
  <div id="share">
    <div class="fa fa-share-alt fa-stack-1x"></div>
  </div>
  <div id='fb' class='sm-social'>
    <a href='https://www.facebook.com/sharer.php
             ?u={ENCODED-URL}'>
      <div class="fa fa-facebook fa-stack-1x sm-icon"></div>
    </a>
  </div>
  <div id='twit' class='sm-social'>
    <a href='https://twitter.com/intent/tweet
             ?url={ENCODE URL}
             &text={ENCODED TEXT}
             &hashtags={HASTAGS}'>
      <div class="fa fa-twitter fa-stack-1x sm-icon"></div>
    </a>
  </div>
  <div id='pin' class='sm-social'>
    <a href="http://pinterest.com/pin/create/button/
             ?url={URI-encoded URL of the page to pin}
             &media={URI-encoded URL of the image to pin}
             &description={optional URI-encoded description}" class="pin-it-button" count-layout="horizontal">
      <div class="fa fa-pinterest fa-stack-1x sm-icon"></div>
  </a>  
</div>
</body>
  
body {
  background: linear-gradient(to bottom, lightblue, pink);
  height: 150vh;
}

@mixin round-button {
  cursor: pointer;
  transition: .25s;
  position: fixed;
  border-radius: 50%;
}

#share {
  @include round-button;
  z-index: 1;
  background: white;
  top: 50px;
  right: 50px;
  color: rgba(30,30,30,.8);
  height: 50px;
  width:50px;
  font-size: 30px;
  box-shadow: 0 7px 25px -5px gray;
}

#share:hover {
  box-shadow: 0 0px 10px -6px gray;
  color: rgba(30,30,30,1);
  
  #fb {
    left: 20%;
  }
}

.fa-share-alt, .fa-close {
  top: 9px;
  left: -1px;
}

.sm-social {
  @include round-button;
  top: 50px;
  right:55px;
  height: 40px;
  width: 40px;
  font-size: 28px;
  box-shadow: 0 10px 15px -10px;
}

.sm-social:hover {
  box-shadow: 0 0 0 0 rgba(0,0,0,0);
}

.sm-icon {
  top: 6px;
  color: white;
}

#fb {
  background: #3b5998;
}

#twit {
  background: #55acee;
}

#pin {
  background: #bd081c;
}

.fa-close {
  left: 1px;
}

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css);

h1, h2 {
  color: black;
  letter-spacing: 4px;
  top: 45px;
  left: 50%;
  position: absolute;
  transform: translate(-50%,-50%)
}

h2 {
  top: 75px;
}
View Compiled 
var out = false;

$('#share').mouseenter(function() {
  if (out === false) {
    $('#fb').css({'right': '68px', 'top': '38px'});
    $('#twit').css({'right': '74px', 'top': '55px'});
    $('#pin').css({'right': '67px', 'top': '72px'});
}});
$('#share').mouseleave(function() {
  if (out === false) {
    $('#fb, #twit, #pin').css({'right':'55px', 'top': '50px'});
  }});
  

$('#share').click(function(){
  out = !out;
  $('div', this).toggleClass('fa-share-alt fa-close');
  
  if (out === true) {
    $('#fb').css({'right': '85px', 'top': '15px'});
    $('#twit').css({'right': '105px', 'top': '55px'});
    $('#pin').css({'right': '85px', 'top': '95px'});
  }
  else {
    $('#fb, #twit, #pin').css({'right':'55px', 'top': '50px'});
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js