Botoes Redes Sociais com efeitos de Transição CSS3

Desta Vez Vou dar os widgets de Redes Sociais OU botoes com efeitos de Transição. Como sabemos that O Crescimento da Mídia sociais ESTA crescendo rapidamente e e amplamente Utilizado Como UMA Maneira de Aumentar OS Visitantes de blogs Que fazemos. ASSIM, COM UM BOTÃO de vista Interessante Que Vai Ser Capaz de Aumentar Seguidor (twitter) UO uma Como Fan Page (FB) não Nosso blogue. Bem logotipo com ISSO.

Veja uma demonstração

HTML

Aqui esta uma Estrutura HTML faz o botão. Eu dividi-lo los div parágrafo tornar Mais Fácil parágrafo Aumentar / Diminuir botoes Que voce deseja please excluir uma Seção "<div id =" mkrbutton "> .............. </ div> ". Por Exemplo, parágrafo removedor o BOTÃO Youtube  aposentar  <div id = "mkrbutton"> <a href="#" class="iconz ytube"> <span> Youtube </ span> </a> </ div> . 

< div  id = "mkrbutton" > < a  href = "#"  class = "fb iconz" > < extensão > Facebook </ intervalo > </ a > </ div > 
< div  id = "mkrbutton" > < a  href = "#"  class = "twiter iconz" > < extensão > Twitter </ intervalo > </ a > </ div > 
< div  id = "mkrbutton" > < a  href = "#"  class = "iconz google" > < extensão > Google+ </ intervalo > </ a > </ div > 
< div  id = "mkrbutton" > < a  href = "#"  class = "iconz pint" > < extensão > Pinterest </ intervalo > </ a > </ div > 
< div  id = "mkrbutton" > < a  href = "#"  class = "linkedin iconz" > < extensão > LinkedIn </ intervalo > </ a > </ div > 
< div  id = "mkrbutton" > < a  href = "#"  class = "devart iconz" > < extensão > DeviantArt </ abrangem > </ a > </ div > 
< div  id = "mkrbutton" > < a  href = "#"  class = "iconz ytube" > < extensão > Youtube </ intervalo > </ a > </ div > 
< div  id = "mkrbutton" > < a  href = "#"  class = "rss iconz" > < extensão > RSS </ intervalo > </ a > </ div > Copiar

Transições CSS e CSS3

Abaixo E o Código CSS USADO parágrafo CRIAR o Efeito SOBRE Este BOTÃO. CSS3 E Utilizado Para fornecer o Efeito utilizando a facilidade de Transição de Saida E a largura. Para mais detalhes, Consulte o Código abaixo.

#mkrbutton 0 auto 0 ; posição : relativo ; text-shadow : 0 1px 0 #FAFAFA ; text-align : center ; text-decoration : nenhum ; white-space : nowrap ; webkit-transition : .25s largura aliviar-in-out ; - ms-transição : .25s largura aliviar-in-out ; -moz-transição : .25s largura aliviar-in-out ; -o-transição : .25s largura aliviar-in-out ; transição : .25s largura aliviar-in- fora ; webkit-box-shadow : inset 0 1px 0 # Fafafa, rgba (0,0,0, 0,28) 0 2px 3px ; -moz-box-shadow : inset 0 1px 0 # Fafafa, rgba (0,0 , 0, .28) 0 2px 3px ; -o-box-shadow : inset 0 1px 0 # Fafafa, rgba (0,0,0, 0,28) 0 2px 3px ; box-shadow : inset 0 1px 0 #FAFAFA, rgba (0,0,0, 0,28) 0 1px 3px ; } #mkrbutton um intervalo { exibição : nenhum ; } #mkrbutton: hover uma extensão { exibição : em linha ; } #mkrbutton um intervalo { font-size : 1.4em ; } #mkrbutton: hover .iconz { width : 250px ; } #mkrbutton .fb { background-position : 0 -384px ; } #mkrbutton .twiter { background-position : 0 -432px ; } #mkrbutton .google { background-position : 0 -480px ; } #mkrbutton .pint { background-position : 0 -528px ; } #mkrbutton .linkedin { background-position : 0 -576px ; } #mkrbutton .devart { background-position : 0 -624px ; } #mkrbutton. ytube { background-position : 0 -672px ; } #mkrbutton .rss { background-position : 0 -720px ; } #mkrbutton .fb: hover { background-position : 0 0 ; cor : # 0374DD ; } #mkrbutton .twiter: pairar { background-position : 0 -48px ; cor : # 00A1DF ; } #mkrbutton .google: hover { background-position : 0 -96px ; cor : # A70000 ; } #mkrbutton .pint: hover { background-position : 0 - 144px ; cor : # C00 ; } #mkrbutton .linkedin: hover { background-position : 0 -192px ; cor : # 005772 ; } #mkrbutton .devart: hover { background-position : 0 -240px ; cor : # 4C7A4A ; } #mkrbutton .ytube: hover { background-position : 0 -288px ; cor : # A00 ; } #mkrbutton .rss: hover { background-position : 0 -336px ; cor : # EC5601 ; }

INSTALAÇÃO NO BLOGSPOT

Primeiro, va para o esquema da Página, clicando no menu de de disposição  :

Go to disposição de Página

Adicione hum Elemento de Página  HTML / JavaScript  , e lhes SEGUIDA, copie o Código e cole soluçar uma forma:

<style type="text/css"> #mkrbutton .iconz {background:#E3E3E3 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsQILYij_JEnn8S4dsuOGA0N1jObo1t8N-ysyqaRW-OynIR7neRSRbxrj7TLxLJs_XfH3S2XQoWA-U3AQpOKpmK23lSdfc1YeaFwO_CX96axor-21FCtDkE9kzMb_kNzDX2G50-S-lRio/s1600/blsocial12.png') 0 0 no-repeat; -moz-border-radius:40px; -webkit-border-radius:40px; -o-border-radius:40px; border-radius:40px; display:block; color:#212121; float:none;height:48px; width: 48px; line-height:48px; margin:10px auto 0; position:relative; text-shadow:0 1px 0 #FAFAFA; text-align:center; text-decoration:none; white-space:nowrap; -webkit-transition:width .25s ease-in-out; -ms-transition:width .25s ease-in-out; -moz-transition:width .25s ease-in-out; -o-transition:width .25s ease-in-out;transition:width .25s ease-in-out; -webkit-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px; -o-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px; box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 1px 3px;} #mkrbutton a span {display:none;}#mkrbutton:hover a span {display:inline;} #mkrbutton a span {font-size:1.4em;} #mkrbutton:hover .iconz {width:250px;} #mkrbutton .fb {background-position: 0 -384px;} #mkrbutton .twiter {background-position: 0 -432px;} #mkrbutton .google {background-position: 0 -480px;} #mkrbutton .pint {background-position: 0 -528px;} #mkrbutton .linkedin {background-position: 0 -576px;} #mkrbutton .devart {background-position: 0 -624px;} #mkrbutton .ytube {background-position: 0 -672px;} #mkrbutton .rss {background-position: 0 -720px;} #mkrbutton .fb:hover {background-position: 0 0;color: #0374DD;} #mkrbutton .twiter:hover {background-position: 0 -48px;color: #00A1DF;}#mkrbutton .google:hover {background-position: 0 -96px;color: #A70000;} #mkrbutton .pint:hover {background-position: 0 -144px;color: #C00;} #mkrbutton .linkedin:hover {background-position: 0 -192px;color: #005772;} #mkrbutton .devart:hover {background-position: 0 -240px;color: #4C7A4A;} #mkrbutton .ytube:hover {background-position:0 -288px;color: #A00;} #mkrbutton .rss:hover {background-position: 0 -336px;color: #EC5601;} </style> <div id="mkrbutton"><a href="#" class="iconz fb"><span>Facebook</span></a></div> <div id="mkrbutton"><a href="#" class="iconz twiter"><span>Twitter</span></a></div> <div id="mkrbutton"><a href="#" class="iconz google"><span>Google+</span></a></div> <div id="mkrbutton"><a href="#" class="iconz pint"><span>Pinterest</span></a></div> <div id="mkrbutton"><a href="#" class="iconz linkedin"><span>LinkedIn</span></a></div> <div id="mkrbutton"><a href="#" class="iconz devart"><span>DeviantArt</span></a></div> <div id="mkrbutton"><a href="#"class="iconz ytube"><span>Youtube</span></a></div> <div id="mkrbutton"><a href="#" class="iconz rss"><span>RSS</span></a></div>


 Copiar

Veja a demo

Nota: A largura do tamanho certo para a aplicação da barra lateral é 300px. Para personalizar o código na barra lateral encontre este código # mkrbutton: hover Iconz. {Width: 250px;} e altere seu valor para a largura para caber na sua sidebar (barra lateral).