9 Botões de compartilhamento social CSS e JavaScript personalizados

Todo site deve incluir alguns botões sociais para aumentar o compartilhamento na web. Mas os botões de compartilhamento padrão não são tão bons e cada um tem um estilo diferente com base na marca das redes.

É por isso que selecionamos esta pequena coleção de botões de compartilhamento personalizados que você pode formatar e reutilizar em seu próprio site. Se você está procurando belos botões de compartilhamento, esses modelos oferecem um ótimo ponto de partida.

1. Compartilhamento Lateral

A primeira é uma das minhas técnicas favoritas criadas pelo desenvolvedor Michael Schofield. Essa interface de usuário de selo social de compartilhamento de lado fixo é muito comum em grandes blogs e sites de revistas.

Esses selos sociais podem permanecer posicionados no topo, perto do título, ou podem rolar para baixo com o usuário. Não encontrei nenhum estudo de caso comparando as diferenças, mas imagino que os botões fixos vejam contagens de compartilhamento mais altas. E de qualquer forma, eles são tão bem projetados que não parecem spam ou apertados no layout.

Este é provavelmente o melhor modelo para começar se você administra um blog e deseja alguns emblemas de compartilhamento personalizados.

2. Botões de imagem

Outro estilo de compartilhamento popular é repostar imagens encontradas em um site. Isso é popular no Pinterest, mas pode funcionar bem no Facebook e no Twitter, e até no Google+.

Esses botões de imagem são designs personalizados usando CSS3 puro e alguns logotipos de fundo para cada um. Eles ainda não se conectam a nenhuma rede social, mas os links âncora podem ser facilmente programados para compartilhamento social.

O design é realmente meu foco aqui porque eles parecem fenomenais anexados a qualquer imagem. Além disso, a localização realmente dá a ideia de que você está tentando incentivar compartilhamentos da própria imagem, não apenas da postagem.

3. Alternar compartilhamentos

Todos nós já vimos esses widgets de compartilhamento do WordPress usando o pequeno ícone de compartilhamento e o menu suspenso. Depois de um tempo, eles podem ficar obsoletos, então ajuda a misturar um pouco.

Com este snippet, você pode redefinir seu compartilhamento social com uma animação personalizada e um menu oculto. É perfeito para qualquer pessoa com um site que queira incentivar muitos compartilhamentos em várias redes.

Cada ícone foi desenhado em CSS puro e a animação é controlada via jQuery. Você deve ser capaz de copiar/colar isso em qualquer layout e fazê-lo funcionar. Ele se encaixaria bem ao lado do título de um artigo, ou mesmo na parte inferior depois que as pessoas terminassem de ler. De qualquer forma, com certeza aumentará os compartilhamentos sociais em geral.

4. Animações de círculo

Para uma animação divertida, confira esses botões circulares criados por Stephane Lyver.

Cada botão tem seu próprio efeito de passar o mouse para animar e todos podem se misturar perfeitamente em qualquer layout. Você pode até alterar as cores do plano de fundo e dos ícones para que eles se destaquem contra um fundo branco simples.

A coisa toda é executada em CSS puro e os ícones são extraídos do Font Awesome via Bootstrap.

Observe que esses botões também não se conectam diretamente aos links de compartilhamento social, mas isso pode ser corrigido facilmente com o código certo.

5. Botões de compartilhamento simples

Curto, doce e direto ao ponto melhor descreve esses botões de compartilhamento.

Eles usam ícones SVG simples do conjunto de ícones Ionicons. Mas você não precisa de Ionic ou qualquer JavaScript para fazer isso funcionar.

Em vez disso, eles usam o valor href junto com novas opções de guia para abrir links de compartilhamento diretamente no navegador. Não é necessário JavaScript, nem SVGs desajeitados.

Se você se aprofundar no conjunto de ícones Ionic, poderá até encontrar outros ícones sociais que queira adicionar. Além disso, você tem controle total sobre os estilos em CSS para que possa alterar o tamanho, preenchimento, cor da fonte e praticamente todo o resto.

6. Redes Sociais Ocultas

O desenvolvedor Chris Sevilleja criou esses botões sociais ocultos, todos com CSS puro.

Alguns sites usam essa técnica para incorporar emblemas de compartilhamento padrão dentro de ícones menores. Mas é certo que esta é uma animação única, por isso não é uma tendência super comum.

O código é muito fácil de configurar e tudo é executado através de CSS para que você tenha controle total. Chris até desenvolveu uma caneta semelhante para os crachás sociais do Google+.

Ambos os trechos de código são fantásticos para praticamente qualquer site e as animações são executadas em todos os navegadores compatíveis com CSS3.

7. Cores de fundo ao passar o mouse

Agora, aqui está uma configuração de compartilhamento social realmente única, onde a cor do plano de fundo muda com base em qual botão você passa o mouse.

Cada botão tem seu próprio ícone personalizado extraído do Font Awesome para que você possa expandir esse conjunto para incluir outros ícones relacionados. Eu também gosto muito dessa abordagem porque ela tem o fallback JavaScript para as alterações de foco.

Mas o desenvolvedor web Christopher Grabinski criou uma alternativa CSS pura que funciona exatamente da mesma forma (em navegadores suportados).

Eu não acho que essa técnica ficaria ótima em um blog maior, embora possa funcionar em sites menores ou posts curtos.

8. Compartilhamento de Flyout

O desenvolvedor Kyle Lavery criou um incrível botão de compartilhamento de submenu que lembra a abordagem do Google aos submenus de material.

Isso usa um pouco de JavaScript, mas são apenas 5 linhas e não são muito complexos. A mágica da animação está no CSS, que você pode personalizar para atender às suas necessidades.

O que também é interessante é que o HTML bruto é incrivelmente simples. Ele tem um contêiner de compartilhamento principal e usa elementos div para os botões. Basicamente, 5 linhas de HTML e 5 linhas de JavaScript, misturadas com um monte de CSS, dão a você esse efeito adorável.

Absolutamente um dos recursos de compartilhamento social mais legais que já vi e o estilo do material design o torna ainda mais legal.

9. Botões de compartilhamento 3D

O último da minha coleção é este design 3D usando transformações CSS 3D ao lado de botões sociais.

O desenvolvedor Fabrizio Bianchi criou esses botões usando CSS puro desde os ícones até as animações de transformação. Os ícones principais são do Font Awesome e o único código JS é para incorporar os botões dentro.

Mas, no geral, esta é uma solução CSS pura que deve funcionar bem em qualquer site. Nem todo mundo gosta do efeito 3D, mas se ele se adequar ao seu design, vá em frente.