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:
Se achar útil, sinta-se a vontade para usar..
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..