Cara Membuat Tombol Share Melayang Responsive di Blog


<style type="text/css">
.sosmed{padding:0;margin:0;position:fixed;right:-119px;top:20%;width:200px}
.sosmed input#hideshare,.sosmed input#openall{display:none}
.sosmed ul,.sosmed ul li{list-style:none;list-style-type:none}
.sticky li.openall{margin:0;padding:0}
.sticky li.share{background-color:#333;color:#efefef;height:43px;padding:0;margin:0 0 1px 0;-webkit-transition:all 0.25s ease-in-out;-moz-transition:all 0.25s ease-in-out;-o-transition:all 0.25s ease-in-out;transition:all 0.25s ease-in-out;cursor:pointer}
.sticky li.share:hover{margin-left:-10px;-webkit-transform:translateX(-115px);-moz-transform:translateX(-115px);-o-transform:translateX(-115px);-ms-transform:translateX(-115px);transform:translateX(-115px)}
.sticky li.share i{float:left;margin:11px;margin-right:15px;color:white;font-size:20px}
.sticky li.share b{padding:0;margin:0;text-transform:uppercase;line-height:43px}
.sticky li a{text-decoration:none;color:white}
.sosmed li.facebook{background:#3b5999}
.sosmed li.twitter{background:#55acee}
.sosmed li.google{background:#dd4b39}
input:checked#hideshare ~ li.share,input:checked#hideshare ~ li.openall{display:none}
label span.show,.sosmed li.openall label{position:relative;cursor:pointer;display:block;width:43px;font-size:20px}
.sosmed li.openall label{text-align:center;background:#bbb;color:white}
input:checked#hideshare ~ label span.show{padding:5px;text-align:center}
label span.show:after{content:'\f105';font-family:FontAwesome}
input:checked#hideshare ~ label span.show:after{content:'\f104'}
/*Popup*/
input:checked#openall ~ .allsosmed{position:fixed;top:20%;left:20%;right:20%;background:#fafafa;transition:opacity 500ms;width:50%;margin:0 auto;padding:2%;box-sizing:border-box;-webkit-transition:width 2s;/* Safari */
    transition:width 2s;z-index:999;box-shadow:0 0 15px rgba(0,0,0,.1);overflow:auto;max-width:500px}
@media screen and (max-width:700px){input:checked#openall ~ .allsosmed{left:10%;right:10%;width:70%}}
@media screen and (max-width:500px){input:checked#openall ~ .allsosmed{left:5%;right:5%;width:80%}.allsosmed li a{font-size:12px}}
@media screen and (max-width:300px){input:checked#openall ~ .allsosmed{top:5%}.openall .allsosmed li a{width:100%}}
.allsosmed{width:0%;-webkit-transition:width 2s;/* Safari */
    transition:width 2s;position:absolute;z-index:-99}
.allsosmed li a{float:left;position:relative;margin:2px;overflow:hidden;line-height:0;width:48%;padding:10px;box-sizing:border-box;border-radius:3px}
.allsosmed li a i{margin-right:5px}
.allsosmed li.pinterest a{background:#b8191c}
.allsosmed li.digg a{background:#546b9f}
.allsosmed li.linkedin a{background:#007ab8}
.allsosmed li.stumbleupon a{background:#ed4a13}
.allsosmed li.delicious a{background:#3398fc}
.allsosmed li.tumblr a{background:#32506d}
.allsosmed .login{display:inline-block;position:relative;width:100%;text-align:center}
.allsosmed .login p{margin:10px 0;padding:0}
.allsosmed .login form input{border:none;padding:15px 5px;background-color:#b1b6bd;font-weight:600;color:rgba(0,0,0,0.5);-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:3px;color:#fafafa;margin:3px}
.allsosmed .login form input.email{width:75%}
.allsosmed .login form input.signin{width:20%;min-width:80px;cursor:pointer}
</style>