social share demo Posted by BDxoul at 1:12 AM Be the first to comment! <style type="text/css"> #buttoncb ul {margin:10px 15px;padding:0px;} #buttoncb ul li {list-style-type: none;padding: 0;background: transparent;margin: 0;} #buttoncb ul li a{background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2FL4hVBQUCv-tmyuS1STIiJS4etQaYdaGQ_AX3lapKn_qGrDe6yeDQ53CZewMQ2gh3wvw7ZaZCXnSS7AY7cg1xJX4ye5CFLaXNPd4bYLCU8XAxTLYHuzpcMNOWYdgo-JNZH_4izdPcoY/s1600/blsocial12.png') 0 0 no-repeat; height:48px;padding-left: 48px;cursor: pointer;text-decoration: none;border-radius:0.5em;-moz-border-radius:0.5em;-webkit-border-radius:0.5em;-o-border-radius:0.5em;display:inline-block;margin:0;width: 220px;} #buttoncb ul li:hover span {margin-left: 10px;opacity: 1;} #buttoncb ul li span {border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; color: white; margin-left: 100px; opacity: 0; position: relative; text-align: center; width: auto; padding: 5px 10px; transition: all 0.3s cubic-bezier(1,2,0,0) 0s; -moz-transition: all 0.3s cubic-bezier(1,2,0,0) 0s; -webkit-transition: all 0.3s cubic-bezier(1,2,0,0) 0s; top: 14px;} #buttoncb span{padding:5px;background:#000;color:#fff;margin:0 5px;} #buttoncb .fb span {background-color: #0853A3;} #buttoncb .twiter span {background-color: #00B1F7;} #buttoncb .google span {background-color: #9E0202;} #buttoncb .pint span {background-color: #D00;} #buttoncb .linkedin span {background-color: #005075;} #buttoncb .devart span {background-color: #4C7A4A;} #buttoncb .ytube span {background-color: #A00;} #buttoncb .rss span {background-color: #EC5601;} #buttoncb a.fb { background-position: 0 -384px;} #buttoncb a.twiter { background-position: 0 -432px;} #buttoncb a.google { background-position: 0 -480px;} #buttoncb a.pint { background-position: 0 -528px;} #buttoncb a.linkedin { background-position: 0 -576px;} #buttoncb a.devart { background-position: 0 -624px;} #buttoncb a.ytube { background-position: 0 -672px;} #buttoncb a.rss { background-position: 0 -720px;} #buttoncb a.fb:hover { background-position: 0 0px;color: #0374DD;} #buttoncb a.twiter:hover { background-position: 0 -48px;color: #00A1DF;} #buttoncb a.google:hover { background-position: 0 -96px;color: #A70000;} #buttoncb a.pint:hover { background-position: 0 -144px;color: #C00;} #buttoncb a.linkedin:hover { background-position: 0 -192px;color: #005772;} #buttoncb a.devart:hover { background-position: 0 -240px;color: #4C7A4A;} #buttoncb a.ytube:hover { background-position: 0 -288px;color: #A00;} #buttoncb a.rss:hover { background-position: 0 -336px;color: #EC5601;} </style> <div id="buttoncb"> <ul> <li><a class="icon fb" href="http://facebook.com/weblizards.xyz">Facebook</a></li> <li><a class="icon twiter" href="http://twitter.com/weblizardsx">Twitter</a></li> <li><a class="icon google" href="http://plus.google.com/thebdxoulx">Google+</a></li> <li><a class="icon ytube" href="http://youtube.com/c/thebdxoulx">Youtube</a></li> <li><a class="icon rss" href="https://www.blogger.com/Your%20RSS%20ID">RSS</a></li> </ul> </div> Facebook Twitter Google+ Youtube RSS Read more »