26 de nov de 2012

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 essa postagem!
  • Share to Facebook
  • Share to Twitter
  • Share to Google+
  • Share to Stumble Upon
  • Share to Blogger
  • Share to Email
  • Share to Yahoo Messenger
  • More...

Recomendamos para você »

7 comentários

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

    ResponderExcluir
  2. 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>

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

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

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

    ResponderExcluir

Seja livre para expor seu pensamento!

Se preferir, antes, leia nossas regras para comentários...
(Atenção: Comentários "Anônimo" não serão publicados. Escolha "Nome/URL". Obrigado!)
Bom comentário!

:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer

 
Pré-Designed by BlogThietKe Designed by @Mundo_Informal
© 2012-2014 .::Mundo Informal::. Todos os direitos Reservados
Licença Creative Commons
...See you!
Voltar ao topo