Social buttons can get located in the page in various forms. The following code hides them in a sliding drawer. When it is hovered they are appeared and when the mouse goes out, the drawer gets closed again. See the demo and use!


HTML
<!-- This script got from www.devanswer.com -->
<div class="btn_wrap">
<span>Share</span>
<div class="container">
<a title="On Facebook" href="https://www.facebook.com/plugins/like.php?href=http://devanswer.com"><i class="fab fa-facebook-f"></i></a>
<a title="On Twitter" href="https://twitter.com/intent/tweet?text=DevAnswer&url=http://devanswer.com"><i class="fab fa-twitter"></i></a>
<a title="On LinkedIn" href="https://www.linkedin.com/shareArticle?mini=true&url=http://devanswer.com"><i class="fab fa-linkedin"></i></a>
<a title="Pin It" href="https://www.pinterest.com/pin/create/button/?url=http://devanswer.com"><i class="fab fa-pinterest"></i></a>
</div>
</div>
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.2.0/css/all.css'><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
                        

CSS
* {
    margin: 0;
    padding: 0;
}

body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    height: 100vh;
    background-color: #FEFEFE;
}

i {
    opacity: 0;
    font-size: 28px;
    color: #1F1E1E;
    will-change: transform;
    -webkit-transform: scale(.1);
            transform: scale(.1);
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}

.btn_wrap {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    overflow: hidden;
    cursor: pointer;
    width: 240px;
    height: 72px;
    background-color: #EEEEED;
    border-radius: 80px;
    padding: 0 18px;
    will-change: transform;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.btn_wrap:hover {
    /* transition-delay: .4s; */
    -webkit-transform: scale(1.1);
            transform: scale(1.1)
}

span {
    position: absolute;
    z-index: 99;
    width: 240px;
    height: 72px;
    border-radius: 80px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 20px;
    text-align: center;
    line-height: 70px;
    letter-spacing: 2px;
    color: #EEEEED;
    background-color: #1F1E1E;
    padding: 0 18px;
    -webkit-transition: all 1.2s ease;
    transition: all 1.2s ease;
}

.container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 240px;
    height: 64px;
    border-radius: 80px;
}

.container i:nth-of-type(1) {
            -webkit-transition-delay: 1.1s;
                    transition-delay: 1.1s;
}

.container i:nth-of-type(2) {
            -webkit-transition-delay: .9s;
                    transition-delay: .9s;
}

.container i:nth-of-type(3) {
            -webkit-transition-delay: .7s;
                    transition-delay: .7s;
}

.container i:nth-of-type(4) {
            -webkit-transition-delay: .4s;
                    transition-delay: .4s;
}

.btn_wrap:hover span {
    -webkit-transition-delay: .25s;
            transition-delay: .25s;
    -webkit-transform: translateX(-280px);
            transform: translateX(-280px)
}

.btn_wrap:hover i {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
}


.dr {
position: absolute;
  bottom: 16px; 
  right: 16px;
  width:100px;
}