4

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.stack.imgur.com/LKbt0.jpg

1 Resposta 1

7

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>

2
  • 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? 30/06/2015 às 12:04
  • 1
    Infelizmente 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 um contador personalizado ao teu botão
    – Chun
    3/07/2015 às 8:31

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .