Material Design Social Share Button Toggle Menu With CSS JQuery

Social Buttons

I design this share button to use in my site then I think about the slogan "Sharing is Caring". So I made this tutorial and share the code here.

This menu looks like Material Design UI as this is trending in Web Designing nowadays. It have slick and smooth design and effects simply using CSS3 and JQuery effects.

Social icons are the fonts provided by Font-Awesome, Thanks to it.

Cool transitions effects using Cascading Stylesheet 3.

Minimal use of JQuery 1.9.1 or above used in it.

<div id="social_link_container">
  <div id="share_btn" class="icon share" onclick="share()">
    <i class="fa fa-share-alt fa-lg"></i>
  </div>
  <div id="social_btn">
    <div class="icon fb"> <a href="#"><i class="fa fa-facebook fa-lg"></i></a>
      <div class="text">Facebook</div>
    </div>
    <div class="icon tw"> <a href="#"><i class="fa fa-twitter fa-lg"></i></a>

      <div class="text">Twitter</div>
    </div>
    <div class="icon inst"> <a href="#"><i class="fa fa-instagram fa-lg"></i></a>

      <div class="text">Instagram</div>
    </div>
    <div class="icon gplus"> <a href="#"><i class="fa fa-google-plus fa-lg"></i></a>
      <div class="text">Google+</div>
    </div>
    <div class="icon ytube"> <a href="#"><i class="fa fa-youtube fa-lg"></i></a>
      <div class="text">YouTube</div>
    </div>
  </div>
</div>

See the Pen Material Design Social buttons by Virender (@vkmr83) on CodePen.

#social_btn {
    display: none;
    position: relative;
}
#share_btn {
    position: relative;
}
.icon {
    position: relative;
    border: none;
    border-radius: 50px;
    text-align: center;
    margin: 10px;
    padding: 5px;
    width: 30px;
    height: 30px;
    line-height: 32px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.icon a {
    width: 30px;
    height: 30px;
    display: block;
}
.icon > .text {
    position: absolute;
    top: 5px;
    left: 10px;
    background: white;
    padding: 0 10px;
    display: table;
    font: bold 16px/30px Roboto, Verdana, Arial;
    visibility: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    transition: all 0.2s ease-in-out;
    z-index: -3;
}
.icon:hover > .text {
    visibility: visible;
    left: 120%;
}
.share {
    color: orange;
    cursor: pointer;
}
.share:hover {
    background: orange;
    color: white;
}
.fb, .fb a {
    color: rgb(59, 89, 152);
}
.tw, .tw a {
    color: rgb(0, 172, 237);
}
.inst, .inst a {
    color: rgb(81, 127, 164);
}
.gplus, .gplus a {
    color: rgb(221, 75, 57);
}
.ytube, .ytube a {
    color: rgb(187, 0, 0);
}

See the Pen Material Design Social buttons by Virender (@vkmr83) on CodePen.

function share() {
    var hidden = $("#social_btn").css("display") == "none";
    if (hidden) {
        $("#social_btn").slideDown(500).css("display", "inline-block");
        console.log("sucess");
    } else {
        $("#social_btn").slideUp(500);
    }
}

See the Pen Material Design Social buttons by Virender (@vkmr83) on CodePen.

See the Pen Material Design Social buttons by Virender (@vkmr83) on CodePen.

Download