• HTML
• CSS
• JS

HTML

<h1>Una versión para compartir en las redes sociales</h1><br><br>

<div class="contenedor inactivo">
    <div class="cont-icono">
        <i class="icon-share-3"></i>
    </div>
    <div class="cont-redes">
        <a class="icon-whatsapp"></a>
        <a class="icon-facebook"></a>
        <a class="icon-twitter"></a>
        <a class="icon-google"></a>
    </div>
</div>

CSS

body{
    font-family:arial;
}
.contenedor{
    width:340px;
    height:auto;
    position:fixed;
   
    top:200px;
    right:-265px;
    transition:0.3s all;
    background:#8e44ad;
}
.cont-icono{
    width:auto;
    height:auto;
    background:#7dcea0;
    text-align:right;
    cursor:pointer;
    
    position:absolute;
    top:0px;
    left:0px;
    transition:0.3s all;
}
.contenedor.inactivo>.cont-icono:hover{
    margin-left:-20px;
}
.contenedor.activo>.cont-icono{
    margin:0px;
}

.cont-icono>i{
    padding:5px 15px 5px 10px;
    font-size:40px;
    color:#fff;
    display:block;
}
.contenedor.activo{
    right:0px;
}
.cont-redes{
    margin-left:100px;
}
.cont-redes>a{
    padding:14px 10px;
    font-size:25px;
    display:inline-block;
    color:#ebdef0;
    cursor:pointer;
}
.cont-redes>a:hover{
    color:#fff;
}

JS

$(function(){
    
    var elem = $(".contenedor");
    
    $(".cont-icono").click(function(){

        if(elem.hasClass("inactivo")){
            elem.removeClass("inactivo");
            elem.addClass("activo");
            $(this).children("i").attr("class","icon-right-open-big");
        }else{
            elem.addClass("inactivo");
            elem.removeClass("activo");
            $(this).children("i").attr("class","icon-share-3");
        }
    });
    
});