<!-- Inspired by this cute dribble: https://dribbble.com/shots/2329804-Social-share -->

<div class="share">
  <p class="noSelect">Share</p>
  <ul class="sites">
    <li><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAhUlEQVQ4T2NkwA0EGBgY+hkYGBKQlBxkYGBwQNbCiMeAAwwMDPZo8iQZ8B9J80cGBoYLUFxArAuQDQhkYGDYgM21+LyAbIAjAwMDyEsYAJsBExgYGPTRAgvk/A8MDAwXGRgYCHoBW+DBbJ5IqQGNDAwMDeQEIklhALOA7EAcNQARR/QJRAC3ICQR7/KDmQAAAABJRU5ErkJggg=="
      />Facebook</li>
    <li><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA7klEQVQ4T6WTa3ECMRRGzyooDsABOAAUlCoAFIADcAASqANQAKugrQMkIIE5O8lOZiEzgd4/u0m+nPtMxT+tKrw/AMZADzgB13CvJ8DNHbDMwEbAOeiiZA9MgC8B/ig4ZCB66z+BH4FagB5+gkDxFvgO6/Ssy1CziDX4BYaJ4ga4J3CRSW0KXGIEG2BWWNAoawEWUU8fLwKa6GMKereIpRBb2USczoGtWRVG0YT/LqD13gW4dibWwGcmkr+gsUuNpSnY83lom4XtWh3ybi9HgF7NP52D9LJePbfID5ZG4IMR5ldzkOIwZWtb+hqzgDtOAiixzlXl+gAAAABJRU5ErkJggg=="
      />Twitter</li>
    <li><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAu0lEQVQ4T82T3REBMRRGz1agBR3QAR2gAx1Qiu1AB+iADlYHWlABc0hmMtnNg/Dge8pk7vdzb24aoAMm1KFrgEcd9836VMD6iJfxfwucgH3IuwYWQ7MqtSB5mRHOwCwXSQU8x6IVcMyKFTwAF2AeX+/nAjtgE9xNkSKma4FtKcE4bOYoiMQhSjD2HZgCt5KAjhbavyIpJDsHk4jeIqVbZhJddRP+F9vTubiJqcDQk+d3VavcE9b1m+98fQJCrDaij99/+wAAAABJRU5ErkJggg=="
      />Instagram</li>
  </ul>
</div>

body {
  background: #FEF6EA;
  font-family: 'Roboto', sans-serif;
}

.share {
  text-transform: uppercase;
  width: 180px;
  height: 40px;
  background: white;
  border-radius: 15px;
  box-shadow: 0px 13px 92px -16px #000000;
  font-weight: bold;
  font-size: 20px;
  letter-spacing: 3px;
  line-height: 40px;
  text-align: center;
  color: #676767;
  margin: 0 auto;
  margin-top: 7%;
  z-index: 9999;
  position: relative;
  cursor:pointer;
}

.share p {
  margin: 0px;
  padding: 0px;
}

.sites {
  display: none;
  font-size: 10px;
  list-style-type: none;
  background: white;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  z-index: -1;
  position: relative;
  margin-top: -25px;
  padding-top: 20px;
  box-shadow: 6px 29px 100px -46px #000000;
  padding-left: 0px;
}

.share p:after {
  content: '+';
  margin-left: 10px;
}

.share p.open:after {
  content: '-';
}

.sites li:hover {
  color: black;
}

.sites li img {
  position: relative;
  top: 4px;
  left: -10px;
}

.noSelect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.shake{
  -webkit-transform: translateY(10%);
      -ms-transform: translateY(10%);
          transform: translateY(10%);
  -webkit-transition: -webkit-transform 0.43s cubic-bezier(0.32, 1.259, 0.375, 1.15);
          transition: transform 0.43s cubic-bezier(0.32, 1.259, 0.375, 1.15);
}

$('.share p').on('click', function() {

  $('.sites').slideToggle('fast', function() {});

  $('.share p').toggleClass('open');
  $('.share p:after').css('content', '-');
  $('.sites').toggleClass('shake');
});