Eu queria saber como faço para personalizar os botões para compartilhamento de algo em alguma rede social. Na web já existem os botões padrões mas eu queria personalizar eles só usando CSS. Eu pretendo fazer como esses aqui: https://i.sstatic.net/LKbt0.jpg
1 Resposta
Isto pode ser feito da seguinte maneira:
Aqui neste exemplo vamos estar a utilizar a font-awesome para demonstração mas depois tu podes trocar e utilizar imagens em vez de estares a usar a font-awesome
se preferires, para evitares de estar a carregar a fonte completa para o teu site, caso não a estejas a utilizar em mais lado nenhum
Para usar a fonte-awesome
primeiro precisamos de a implementar no <head>
do nosso site, usando a seguinte linha de código:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
De seguida iremos então criar o nosso HTML e CSS:
/* Social Button CSS */
.share-btn {
display: inline-block;
color: #ffffff;
border: none;
padding: 0.5em;
width: 4em;
box-shadow: 0 2px 0 0 rgba(0,0,0,0.2);
outline: none;
text-align: center;
}
.share-btn:hover {
color: #eeeeee;
}
.share-btn:active {
position: relative;
top: 2px;
box-shadow: none;
color: #e2e2e2;
outline: none;
}
.twitter { background-color: #55acee; }
.google-plus { background-color: #dd4b39; }
.facebook { background-color: #3B5998; }
.stumbleupon { background-color: #444444; }
.reddit { background-color: #FFA500; }
.linkedin { background-color: #4875B4; }
.email { background-color: #444444; }
/* Código para botão com texto */
.long-share-btn {
display: inline-block;
color: #ffffff;
border: none;
padding: 0.5em 1.5em;
box-shadow: 0 2px 0 0 rgba(0,0,0,0.2);
outline: none;
text-align: center;
text-transform: uppercase;
font-family: sans-serif;
font-weight: bold;
}
.long-share-btn:hover {
color: #eeeeee;
}
.long-share-btn:active {
position: relative;
top: 2px;
box-shadow: none;
color: #e2e2e2;
outline: none;
}
a.long-share-btn {
text-decoration: none;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Twitter -->
<a href="http://twitter.com/share?url=http://pt.stackoverflow.com/&text=<TEXT>&via=<VIA>" target="_blank" class="share-btn twitter">
<i class="fa fa-twitter"></i>
</a>
<!-- Google Plus -->
<a href="https://plus.google.com/share?url=http://pt.stackoverflow.com/" target="_blank" class="share-btn google-plus">
<i class="fa fa-google-plus"></i>
</a>
<!-- Facebook -->
<a href="http://www.facebook.com/sharer/sharer.php?u=http://pt.stackoverflow.com/" target="_blank" class="share-btn facebook">
<i class="fa fa-facebook"></i>
</a>
<!-- StumbleUpon (url, title) -->
<a href="http://www.stumbleupon.com/submit?url=http://pt.stackoverflow.com/&title=<TITLE>" target="_blank" class="share-btn stumbleupon">
<i class="fa fa-stumbleupon"></i>
</a>
<!-- Reddit (url, title) -->
<a href="http://reddit.com/submit?url=http://pt.stackoverflow.com/&title=<TITLE>" target="_blank" class="share-btn reddit">
<i class="fa fa-reddit"></i>
</a>
<!-- LinkedIn -->
<a href="http://www.linkedin.com/shareArticle?url=<URL>&title=<TITLE>&summary=<SUMMARY>&source=<SOURCE_URL>" target="_blank" class="share-btn linkedin">
<i class="fa fa-linkedin"></i>
</a>
<!-- Email -->
<a href="mailto:?subject=<SUBJECT&body=<BODY>" target="_blank" class="share-btn email">
<i class="fa fa-envelope"></i>
</a>
<br><br>
<!-- Facebook -->
<a href="http://www.facebook.com/sharer/sharer.php?u=http://pt.stackoverflow.com/" target="_blank" class="long-share-btn facebook">
<i class="fa fa-facebook-square"></i> Facebook
</a>
-
Obrigado, resolveu meus problemas. Eu só gostaria de saber mais uma coisa. Como eu faço isso com o botão de like do Facebook? Commented 30/06/2015 às 12:04
-
1Infelizmente eu penso que isto não seja possível de se fazer utilizando o botão Like pois este comporta-se de forma diferente. Mas se estás à procura de adicionar o contador de
likes/shares
a um destes botões do Facebook personalizados, dá uma vista de olhos a esta pergunta para veres como podes adicionar umcontador
personalizado ao teu botão– ChunCommented 3/07/2015 às 8:31