Botão Redes Sociais CSS

estava a procura de um botão para minhas redes sociais e achei vários modelos na web, mas todos com códigos muito complexos e sem sentido, então resolvi criar meu próprio, botão de rede social todo em CSS que ficou bem simples e funcional, vamos para o tutorial.
1º Passo: adicione um elemento de HTML/JavaScript.

Caso nao saiba adicionar adicionar o elemento HTML/JavaScript.

2º Passo: Cole o código a baixo dentro do elemento HTML/JavaScript.

.social {
 width: 314px
  }

.social div { 
 position: relative; 
 cursor: pointer; 
 padding: 0; 
 list-style: none 
 }
 
 .social .fb2,.tw2,.gp2,.fd2,.in2,.you2 { 
 z-index: 7; 
 float: left; 
 margin: 1px; 
 position: relative; 
 display: block; 
 }
 
 
 .social .fb2 { 
 background: url(http://dicasbl0gger.xpg.uol.com.br/btnsocial/Facebook2.png) no-repeat center center #1f69b3; 
 width: 77px; 
 height: 70px 
 }
 
 .social div:hover .fb2 {
  background: url(http://dicasbl0gger.xpg.uol.com.br/btnsocial/Facebook1.png ) no-repeat center center #1f69b3;
 }
 
  
   
 .social .tw2 { 
 background: url(http://dicasbl0gger.xpg.uol.com.br/btnsocial/twitter1.png) no-repeat center center #43b3e5; 
 width: 76px; 
 height: 70px 
 }
 
  .social div:hover .tw2 {
   background: url(http://dicasbl0gger.xpg.uol.com.br/btnsocial/twitter2.png) no-repeat center center #43b3e5
   }
  
  
 .social .gp2 { 
 background: url(http://dicasbl0gger.xpg.uol.com.br/btnsocial/g+1.png) no-repeat center center #da4a38; 
 width: 76px; 
 height: 70px 
 }
 
 .social div:hover .gp2 {
  background: url(http://dicasbl0gger.xpg.uol.com.br/btnsocial/g+2.png) no-repeat center center #da4a38
  }
 
 
 .social .you2 { 
 background: url(http://dicasbl0gger.xpg.uol.com.br/btnsocial/youtube2.png) no-repeat center center #B93936; 
 width: 77px; 
 height: 70px }

.social div:hover .you2 {
  background: url(http://dicasbl0gger.xpg.uol.com.br/btnsocial/youtube1.png) no-repeat center center #B93936
  }
</style>

3º Passo: Substitua o trecho abaixo do código pelas URL correspondente a sua rede social.

<div><a class="fb2" href="URL_Facebook" target="_blank"></a></div>
<div><a class="gp2" href="URL_Google+" target="_blank"></a></div>
<div><a class="tw2" href="URL_Twitter" target="_blank"></a></div>
<div><a class="you2" href="URL_Youtube" target="_blank"></a></div>

Coloque sua URL do facebook (Ex: https://www.facebook.com/dicasbloggernet )
Coloque sua URL Google+(Ex:https://plus.google.com/117856044223631769016)
Coloque sua URL Twitter (Ex: https://twitter.com/dicasbloggernet )
Coloque sua URL Youtube (Ex: https://www.youtube.com/user/origamer )

4º Passo: Save o elemento HTML/JavaScript.

Demonstração do resultado final, clique aqui e veja.

Pronto agora o botão de rede sociais está funcionando, agora é só testar como ficou.

Espero que esse tutorial seja útil! Expresse sua opinião, comente e tire suas duvidas...

SIGA @DicasBlogger.net agora e mantenha-se mais atualizado!

Botão Redes Sociais CSS

Recomendamos que leia também