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).

Básico do CSS para tumblr

 Para construir o estilo da página, ou seja, as cores, as posições e tudo mais, é necessário entender os comandos em CSS. Aqui vão os básicos, que podem ser usado em quase todas as formatações que você fizer em seu theme.

 background-color:#COR EM HTML;

Para que serve? Para determinar a cor do fundo. Para que geralmente é utilizada? Fundo do theme, caixa dos posts/sidebar, caixa do menu, etc. O que são cores em HTML? Para a cor “funcionar” e aparecer no theme, ela precisa estar em HTML. Você encontra os códigos em geradores, por exemplo, eu uso esse aqui.

background-image:url('URL DA IMAGEM');

Para que serve? Para determinar o fundo colocando uma imagem. Para que geralmente é utilizada? Fundo do theme, caixa do menu hover, etc. O que é a URL da imagem? Quando você clica com o botão direito do mouse em uma imagem, clique em “copiar URL da imagem”, e pronto, esse é o endereço HTML dela. Eu tenho uma foto no meu computador, como consigo o código HTML dela? Você hospeda ela em algum site. Eu uso esse aqui.

font-family:'NOME DA FONTE';

Para que serve? Para determinar a fonte da escrita de determinado local. Para que geralmente é utilizada? Para determinar o nome da fonte em qualquer lugar do HTML.Qualquer nome de fonte que eu colocar ali, aparece? Não. As mais simples, que já vem no computador, é só colocar o nome que aparecem. Mas algumas você precisa fazer download e etc para aparecer. 

font-size:NUMEROpx;

Para que serve? Para determinar o tamanho da fonte de determinado local. Para que geralmente é utilizada? Para determinar o tamanho da fonte em qualquer lugar do HTML.Qualquer número que eu colocar ali fica certo? Sim. O que é ‘px’? Uma unidade de medida HTML, existem outras como ‘pt’ e etc.

letter-spacing:NUMEROpx;

Para que serve? Para determinar o espaçamento entre as letras de determinado local.Para que geralmente é utilizada? Para determinar o espaçamento das letras emqualquer lugar do HTML. Qualquer número que eu colocar ali fica certo? Sim. Qual número eu coloco pra não deixar nenhum espaçamento entre as letras, deixá-las ‘normais’? 1px.

line-height:NUMEROpx;

Para que serve? Para determinar o espaçamento entre as linhas. Para que geralmente é utilizada? Em títulos dos posts, ou i-frame. Qualquer número que eu colocar ali fica certo? Sim. Qual número eu coloco para as linhas não ficarem grudadas e impossíveis de ler? 30px.

font-style:normal; font-style:italic; font-style:bold;

Para que servem? Para determinar o estilo da fonte. Cada uma das três tem funções diferentes. ‘Normal’ é para a fonte ficar sem efeito algum, ‘italic’ para ficar em itálico e ‘bold’ para ficar em negrito. 

width:NUMEROpx;

Para que serve? Para determinar a largura de determinada coisa. Para que geralmente é utilizada? Para determinar a largura da sidebar, da caixa dos posts, da caixa do menu e etc.

width="NUMEROpx"

Para que serve? Para determinar a largura de determinada imagem. 

height:NUMEROpx;

Para que serve? Para determinar a altura de determinada coisa. Para que geralmente é utilizada? Para determinar a altura da caixa do menu.

height="NUMEROpx"

Para que serve? Para determinar a altura de determinada imagem. 

t:left; text-align:right; text-align:center;ext-align:justify; text-align

Para que servem? Para determinar o alinhamento do texto de determinado local. Cada uma das quatro tem função diferente. ‘Justify’ é para deixar o texto justificado, ‘left’ para alinhar a esquerda, ‘right’ a direita e ‘center’ ao centro.