9 boutons de partage social CSS et JavaScript personnalisés

Chaque site devrait inclure des boutons sociaux pour augmenter le partage sur le Web. Mais les boutons de partage par défaut ne sont pas si géniaux et ils ont chacun un style différent en fonction de la marque des réseaux.

C'est pourquoi nous avons organisé cette petite collection de boutons de partage personnalisés que vous pouvez formater et réutiliser sur votre propre site. Si vous recherchez de beaux boutons de partage, ces modèles offrent un excellent point de départ.

1. Partage latéral

La première est l'une de mes techniques préférées créées par le développeur Michael Schofield. Cette interface utilisateur de badge social à partage latéral fixe est très courante sur les grands blogs et les sites de magazines.

Ces badges sociaux peuvent soit rester positionnés tout en haut près du titre, soit défiler vers le bas avec l'utilisateur. Je n'ai trouvé aucune étude de cas comparant les différences, mais j'imagine que les boutons fixes voient un nombre de partages plus élevé. Et de toute façon, ils sont si bien conçus qu'ils n'ont pas l'air de spam ni de chausse-pied dans la mise en page.

C'est probablement le meilleur modèle pour commencer si vous gérez un blog et souhaitez des badges de partage personnalisés.

2. Boutons d'image

Un autre style de partage populaire consiste à republier des images trouvées sur un site Web. Ceci est populaire avec Pinterest mais peut bien fonctionner pour Facebook et Twitter, et même Google+ également.

Ces boutons d'image sont des conceptions personnalisées utilisant du CSS3 pur et des logos d'arrière-plan pour chacun. Ils ne se connectent pas encore à des réseaux sociaux, mais les liens d'ancrage peuvent facilement être programmés pour le partage social.

Le design est vraiment mon objectif ici car ils ont l'air phénoménaux attachés à n'importe quelle image. De plus, l'emplacement donne vraiment l'idée que vous essayez d'encourager les partages de l'image elle-même, pas seulement la publication.

3. Basculer les partages

Nous avons tous vu ces widgets de partage WordPress utilisant la petite icône de partage et le menu déroulant. Après un certain temps, ils peuvent devenir rassis, il est donc utile de les mélanger un peu.

Avec cet extrait, vous pouvez relooker votre partage social avec une animation personnalisée et un menu caché. Il est parfait pour quiconque possède un site qui souhaite encourager de nombreux partages sur plusieurs réseaux.

Chaque icône a été conçue en pur CSS et l'animation est contrôlée via jQuery. Vous devriez pouvoir simplement copier/coller ceci dans n'importe quelle mise en page et le faire fonctionner. Il irait bien juste à côté du titre d'un article, ou même en bas après que les gens aient fini de lire. Quoi qu'il en soit, il est sûr d'augmenter les parts sociales à tous les niveaux.

4. Animations de cercle

Pour un peu d'animation amusante, consultez ces boutons circulaires créés par Stéphane Lyver.

Chaque bouton a son propre effet de survol pour animer et ils peuvent tous se fondre parfaitement dans n'importe quelle mise en page. Vous pouvez même modifier les couleurs d'arrière-plan et des icônes afin qu'elles se détachent sur un fond blanc uni.

Le tout fonctionne sur CSS pur et les icônes sont extraites de Font Awesome via Bootstrap.

Notez que ces boutons ne se connectent pas non plus directement aux liens de partage social, mais cela peut être corrigé facilement avec le bon code.

5. Boutons de partage simples

Court, doux et précis décrit le mieux ces boutons de partage.

Ils utilisent des icônes SVG simples du jeu d'icônes Ionicons. Mais vous n'avez pas besoin d'Ionic ou de JavaScript pour les faire fonctionner.

Au lieu de cela, ils utilisent la valeur href avec de nouvelles options d'onglet pour ouvrir les liens de partage directement dans le navigateur. Aucun JavaScript requis, aucun SVG maladroit requis.

Si vous creusez dans le jeu d'icônes Ionic, vous pouvez même trouver d'autres icônes sociales que vous voudrez peut-être ajouter. De plus, vous avez un contrôle total sur les styles en CSS afin que vous puissiez modifier la taille, le rembourrage, la couleur de la police et à peu près tout le reste.

6. Sociales cachées

Le développeur Chris Sevilleja a créé ces boutons sociaux cachés avec du CSS pur.

Certains sites Web utilisent cette technique pour intégrer des badges de partage par défaut dans des icônes plus petites. Mais il faut admettre que c'est une animation unique donc ce n'est pas une tendance super courante.

Le code est vraiment facile à configurer et tout passe par CSS, vous avez donc un contrôle total. Chris a même développé un stylet similaire pour les badges sociaux Google+.

Les deux extraits de code sont fantastiques pour pratiquement tous les sites Web et les animations s'exécutent dans tous les navigateurs compatibles CSS3.

7. Survolez les couleurs d'arrière-plan

Voici maintenant une configuration de partage social vraiment unique où la couleur d'arrière-plan change en fonction du bouton sur lequel vous survolez.

Chaque bouton a sa propre icône personnalisée extraite de Font Awesome afin que vous puissiez même étendre cet ensemble pour inclure d'autres icônes associées. J'aime aussi beaucoup cette approche car elle a le repli JavaScript pour les changements de survol.

Mais le développeur Web Christopher Grabinski a créé une alternative CSS pure qui fonctionne exactement de la même manière (dans les navigateurs pris en charge).

Je ne pense pas que cette technique aurait fière allure sur un blog plus grand, bien qu'elle puisse fonctionner sur des sites plus petits ou sur de courts articles de blog.

8. Partage de Flyout

Le développeur Kyle Lavery a créé un incroyable bouton de partage volant qui rappelle l'approche de Google en matière de volants matériels.

Cela utilise un peu de JavaScript mais ce n'est que 5 lignes et pas très complexe. La magie de l'animation est dans le CSS que vous pouvez personnaliser en fonction de vos besoins.

Ce qui est également intéressant, c'est que le HTML brut est incroyablement simple. Il a un conteneur de partage principal et utilise ensuite des éléments div pour les boutons. Fondamentalement, 5 lignes de HTML et 5 lignes de JavaScript, mélangées à tout un tas de CSS, vous donnent ce bel effet.

Absolument l'une des fonctionnalités de partage social les plus cool que j'ai vues et le style de conception matérielle le rend encore plus cool.

9. Boutons de partage 3D

Le dernier de ma collection est cette conception 3D utilisant des transformations CSS 3D aux côtés de boutons sociaux.

Le développeur Fabrizio Bianchi a créé ces boutons en utilisant du CSS pur, des icônes aux animations de transformation. Les icônes principales proviennent de Font Awesome et le seul code JS sert à intégrer les boutons à l'intérieur.

Mais dans l'ensemble, il s'agit d'une solution CSS pure qui devrait bien fonctionner sur n'importe quel site. Tout le monde n'aime pas l'effet 3D, mais si cela convient à votre conception, allez-y.