JScript

Programação & Desenvolvimento


Você não está conectado. Conecte-se ou registre-se

Links de redes sociais elegantes

3 participantes

Ir para baixo  Mensagem [Página 1 de 1]

1Links de redes sociais elegantes Empty Links de redes sociais elegantes Qua 19 Fev 2014, 4:28 pm

waghcwb

waghcwb
Desenvolvedores
Desenvolvedores

Bom pessoal vim compartilhar uns links de redes sociais que fiz aqui, ainda são poucos mas posso ir adicionando mais aos poucos..
http://jsfiddle.net/Wagner/sv76H/embedded/result/

Espero que gostem..

Source code:
Código:
<!-- facebook -->
<a href="#" class="social-btn facebook"><i class="fa fa-facebook-square"></i> Facebook</a><br>
<!-- flickr -->
<a href="#" class="social-btn flickr"><i class="fa fa-flickr"></i> Flickr</a><br>
<!-- github -->
<a href="#" class="social-btn github"><i class="fa fa-github-square"></i> GitHub</a><br>
<!-- google -->
<a href="#" class="social-btn google"><i class="fa fa-google-plus-square"></i> Google</a><br>
<!-- linkedin -->
<a href="#" class="social-btn linkedin"><i class="fa fa-linkedin-square"></i> Linkedin</a><br>
<!-- skype -->
<a href="#" class="social-btn skype"><i class="fa fa-skype"></i> Skype</a><br>
<!-- youtube -->
<a href="#" class="social-btn youtube"><i class="fa fa-youtube-play"></i> YouTube</a><br>
<!-- twitter -->
<a href="#" class="social-btn twitter"><i class="fa fa-twitter"></i> Twitter</a>
Código:
.social-btn{
  background: #f8f8f8;
  border: #ddd 1px solid;
  color: #777777;
  border-radius: 3px;  
  -webkit-border-radius: 3px;
 -moz-border-radius: 3px;  
 -o-border-radius: 3px;  
  -ms-border-radius: 3px;  
  padding: 4px 10px;
  margin: 2px 0;
  display: inline-block;
  font: 12px Helvetica-neue, Arial, sans-serif;
  cursor: pointer;
  font-weight: bold;
  text-decoration: none;
  transition: .3s linear .1s;
}
.social-btn:hover{
  color: #fff;
}
.facebook{
  color: #3b5998;
}
.facebook:hover{
  background: #3b5998;
  border-color: #1f4189;
}
.flickr{
  color: #f3006f;
}
.flickr:hover{
  background: #f3006f;
  border-color: #dc0065;
}
.github{
  color: #333;
}
.github:hover{
  background: #333;
  border-color: #111;
}
.google{
  color: #dd4b39;
}
.google:hover{
  background: #dd4b39;
  border-color: #bd4233;
}
.linkedin{
  color: #0077b5;
}
.linkedin:hover{
  background: #0077b5;
  border-color: #006599;
}
.skype{
  color: #00abea;
}
.skype:hover{
  background: #00abea;
  border-color: #009cd6;
}
.youtube{
  color: #cc181e;
}
.youtube:hover{
  background: #cc181e;
  border-color: #ad1419;
}
.twitter{
  color: #55acee;
}
.twitter:hover{
  background: #55acee;
  border-color: #468fc6;
}

Se achar útil, sinta-se a vontade para usar..

http://wagneraugusto.com.br/

2Links de redes sociais elegantes Empty Re: Links de redes sociais elegantes Qua 19 Fev 2014, 9:45 pm

joelson0007

joelson0007
Moderadores
Moderadores

Achei que ficou um pouco pequeno os ícones, mas ficou muito bonito elegante!

bom trabalho @wagner

3Links de redes sociais elegantes Empty Re: Links de redes sociais elegantes Qua 19 Fev 2014, 10:26 pm

waghcwb

waghcwb
Desenvolvedores
Desenvolvedores

 Obrigado joelson0007, a respeito do tamanho, eu fiz pequenos mesmo para que possam ser usados por exemplo no rodapé de postagens de fóruns ou blogs/sites.. Mas nada que um width ou mexer no padding ali não resolvam Very Happy
 Em breve pretendo adicionar um para por no site mesmo, esses em um tamanho adequado para isso.

http://wagneraugusto.com.br/

4Links de redes sociais elegantes Empty Re: Links de redes sociais elegantes Qua 19 Fev 2014, 11:17 pm

JScript

JScript
Administradores
Administradores

Ficou muito bom amigo! O CSS é bem poderoso...

Como adicionou os ícones?

JS

http://autoitbrasil.com

5Links de redes sociais elegantes Empty Re: Links de redes sociais elegantes Qua 19 Fev 2014, 11:33 pm

waghcwb

waghcwb
Desenvolvedores
Desenvolvedores

Esqueci de comentar isso no tutorial, foi usando font awesome mesmo Very Happy

http://wagneraugusto.com.br/

Conteúdo patrocinado



Ir para o topo  Mensagem [Página 1 de 1]

Permissões neste sub-fórum
Não podes responder a tópicos