MASIGNCLEAN101

Botões Redes Sociais com efeitos de transição CSS3

Sociais botões de mídia com efeitos de transição

Desta vez vou dar widgets de redes sociais ou botões com efeitos de transição. Como sabemos que o crescimento da mídia social está crescendo rapidamente 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) ou a Fan Page como (FB) do nosso blog. Bem logo com isso.


HTML

Aqui está a estrutura HTML do botão. Eu dividi-lo em div para tornar mais fácil para aumentar / diminuir botões que você deseja por favor excluir a seção "<div id="mkrbutton"> .............. </ div>". Por exemplo, para remover o botão Youtube retire <div id="mkrbutton"><a href="#" class="iconz ytube"><span>Youtube</span></a></div>

<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>Copy

Transições CSS e CSS3

Abaixo é o código CSS usado para criar o efeito sobre este botão. CSS3 é utilizado para fornecer o efeito utilizando a facilidade de transição de saída é a largura. Para mais detalhes, consulte o código abaixo.


#mkrbutton .iconz {background:#E3E3E3 url('http://2.bp.blogspot.com/-JKB0aVYaIW0/UC-oBl8NXxI/AAAAAAAAEYA/IbgyikdkM5A/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;}Copy

INSTALAÇÃO NO BLOGSPOT


Primeiro, vá para o layout da página, clicando no menu de layout :


Blogger disposição
Ir para layout de página

Adicione um elemento de página HTML / JavaScript , e em seguida, copie o código e cole sob a forma:


<style type="text/css">
#mkrbutton .iconz {background:#E3E3E3 url('http://2.bp.blogspot.com/-JKB0aVYaIW0/UC-oBl8NXxI/AAAAAAAAEYA/IbgyikdkM5A/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>Copy



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

Fonte: Mkr-site.blogspot.com
Compartilhe esse artigo!
Unknown
escreve para o Mundo Informal sob a licença Creative Commons BY-SA 3.0. Você pode usar e compartilhar este conteúdo desde que credite o autor e veículo original do mesmo.
avatar

Muito bacana, como faço para retirar um dos botões, por exemplo o do LinkedIn?

29 de novembro de 2012 11:24
avatar

Para isso, basta remover o código Html do botão:
Por exemplo, se for o do linkedin, retire o seguinte:

<div id="mkrbutton"><a href="#" class="iconz linkedin"><span>LinkedIn</span></a></div>

29 de novembro de 2012 17:30
avatar
raK

os efeito nao aparecem

4 de abril de 2013 19:27
avatar

Onde e que bota nosso linq Ex: twitter.com/blog10graus

22 de julho de 2013 15:24
avatar

Primeiro você precisa localizar a opção Twitter. E logo antes dele tem um # que você deve apagar para inserir o link de seu perfil. (o)

22 de julho de 2013 20:37
avatar

Como eu faço pra adicionar um botão, por exemplo, queria o do instagram e do tumblr?

31 de agosto de 2013 02:56
Seja livre para expor seu pensamento!

Se preferir, antes leia nossa política para comentários...
Atenção: Comentários "Anônimo" não serão publicados. Escolha "Nome/URL". Obrigado!