css tombol share

<style type='text/css'>
.sosial ul{position:relative;height:45px;margin:0;padding:0;list-style:none}
.sosial li {position:relative;float:left;margin:0;padding:0;width:20%;height:20px}
.sosial li a {display:block;height:40px;line-height:40px;font-weight:bold;color:#fff;text-align:center;border-top:4px inset rgba(0,0,0,.1)}
.sosial li a span{display:block;font-family:FontAwesome;font-size:40px;line-height:50px;width:50px;height:50px;border-radius:100px;border-bottom:3px solid #fff;position:absolute;background:#666;color:#fff;left:35%;top:135%;transition:all 0.3s ease 0s;opacity:0;visibility:hidden}
.sosial li a:hover span{content:&quot;&quot;;position:absolute;top:-150%;left:35%;display:block}
.sosial li:hover span{opacity:1;opacity:1;visibility:visible}
.sosial li:nth-child(1) a,.sosial li:nth-child(1) a span{background: #4A5E99}
.sosial li:nth-child(2) a,.sosial li:nth-child(2) a span{background: #00BFFF}
.sosial li:nth-child(3) a,.sosial li:nth-child(3) a span{background: #d34836}
.sosial li:nth-child(4) a,.sosial li:nth-child(4) a span{background: #C92228}
.sosial li:nth-child(5) a,.sosial li:nth-child(5) a span{background: #F99C58}
@media screen and (max-width:414px){
  .sosial ul{height:220px}
  .sosial li {float:right;width:100%;height:44px;transition: all .5s}
  .sosial li a span{left:35%;top:135%}
  .sosial li a:hover span{content:"";position:absolute;top:-40%;left:-10%}
  .sosial li:hover{width:90%}
}
</style>