20 boutons de médias sociaux HTML5 et Bootstrap 2022
Publié: 2022-07-15Libérez le potentiel des réseaux sociaux en utilisant ces meilleurs (et les plus cool) modèles de boutons sociaux - gratuitement.
Nous avons examiné de nombreux boutons et icônes disponibles sur le Web, mais nous nous sommes contentés de ces 21.
Vous pouvez facilement trouver le bon style grâce à la diversité de cette collection.
Cela ne s'arrête pas là.
Si vous le souhaitez, vous pouvez également les embellir et les personnaliser en fonction de votre entreprise et de votre site Web.
L'effet de partage social peut apporter des résultats très positifs . Nous l'avons vu nous-mêmes même dans des niches qui ne sont peut-être pas trop populaires sur Facebook, Instagram, etc.
Vous pouvez utiliser ces boutons sociaux Bootstrap pour partager TOUT ce que vous voulez.
Soyez sociable !
Boutons d'amorçage V15
Nous avons des tonnes de variantes de boutons différentes pour vous, mais nous avons décidé de n'inclure que celles qui vous seront le plus utiles. De plus, vous remarquerez que les kits incluent plusieurs boutons, pas seulement ceux des médias sociaux.
Vous GAGNEZ beaucoup de temps.
Bootstrap Buttons V15 est probablement mon ensemble préféré de la liste. Les boutons sociaux se présentent sous deux formats différents avec un effet d'ombre cool, qui disparaît au survol.
Boutons d'amorçage V18
Bootstrap Buttons V18 est une collection de différents boutons très DISTINCTS des autres. Pourtant, vous en avez aussi des plus traditionnels, vous pouvez donc choisir le chemin que vous voulez.
Même si vous ne le remarquez pas à première vue, chaque bouton comprend également une ombre qui crée un effet de clic sympa (en disparaissant).
Vous pouvez l'essayer vous-même en visitant la page d'aperçu de la démo en direct.
Boutons d'amorçage V13
Même si les boutons Bootstrap V13 sont sur un fond sombre , vous pouvez l'utiliser avec d'autres styles d'arrière-plan. Vous n'avez pas toujours besoin de suivre les configurations par défaut.
N'hésitez pas à aller à contre-courant.
Ici, vous obtenez plusieurs styles de boutons de médias sociaux différents, vous trouverez donc sûrement le design qui vous convient le mieux . La moitié vient avec une couleur unie et la moitié juste avec un contour.
Boutons d'amorçage V01
Un ensemble de boutons sociaux HTML simples et polyvalents que vous pouvez rapidement intégrer à n'importe quel site Web ou blog. Ils suivent l'image de marque de chaque plate-forme sociale, vous êtes donc invités à les utiliser tels quels.
En plus de la variation avec une structure de couleur unie, il y a aussi ceux avec juste un contour.
De plus, les deux versions sont livrées avec un effet CLICK qui fonctionne en supprimant l'ombre.
Animation de bouton social plat fantaisie par Colorlib
Colorlib fait passer les animations CSS3 au niveau supérieur avec son jeu d'icônes sociales Fancy Flat Animated. Nous avons les principales icônes de réseaux sociaux LinkedIn, Twitter, Instagram, Youtube, Github et Facebook intégrées à des arrière-plans carrés simples .
De nombreuses autres icônes sont également disponibles grâce à la bibliothèque Font Awesome qui est mise à votre disposition.
En survolant/cliquant sur chacune des icônes, une ANIMATION spécifique se déclenche qui transforme les icônes en cercle plutôt qu'en carré par défaut. Cela peut être un ajout intéressant à un site Web déjà dynamique et interactif.
Boutons sociaux animés avec Sass
Ensuite, nous avons un ensemble d'icônes sociales animées par SASS de Colorlib qui comporte des info- bulles spécifiques pour chaque icône.
Par exemple, chaque fois que quelqu'un survole l'une des icônes, il reçoit instantanément une info-bulle de notification indiquant de quoi il s'agit. Vous pouvez la personnaliser ENTIÈREMENT pour refléter vos idées et vos messages, ou simplement les laisser par défaut en spécifiant le réseau social.
Des icônes sont également disponibles pour GitHub, Email, Facebook, LinkedIn, Twitter, Instagram, Youtube et d'autres réseaux sociaux basés sur Font Awesome .
De plus, le jeu de couleurs par défaut est un arrière-plan gris avec un texte d'icône blanc.
Font Awesome Social Buttons propulsé par Bootstrap
Enfin, nous avons une combinaison de deux frameworks très populaires sur le Web - Bootstrap et Font Awesome.
Imaginez si ces deux-là avaient un bébé, ce que vous obtiendriez de cet ensemble d'icônes génial de nul autre que Stan Williams. Ces icônes s'étendront jusqu'à GitHub, Apple, Android, Skype et Stack Overflow et toute la bibliothèque Font Awesome de centaines d'icônes.
C'est l'ensemble à acquérir si vous avez besoin de couleurs et de déclarations STRICT pour vos besoins sociaux.
Boutons sociaux CSS/HTML minimaux par Colorlib
Voici quelques icônes sociales soignées de Colorlib. Cet ensemble comprend un ensemble d'icônes de couleur grise pour Facebook, Twitter, Instagram, Youtube, Behance et des centaines d'autres.
Colorlib a ajouté une bordure facile à supprimer qui rend les icônes plus compactes et sera beaucoup plus facile à intégrer dans les conceptions.
Cependant, vous pouvez toujours éliminer la bordure et utiliser les icônes que vous aimez. Par exemple, dans les menus de navigation du pied de page ou de l'en-tête ou dans vos zones de contenu.
Boutons sociaux avec survol coulissant
C'est formidable de voir l'évolution du Web et plus particulièrement les aspects de conception de langages comme CSS3 et HTML5. Voici un ensemble d'icônes magnifique et moderne provenant de Colorlib.
Cet ensemble présente les quatre principaux réseaux sociaux (LinkedIn, Twitter et Facebook) dans un bel agencement de couleurs et un boîtier de mise en page pour contenir les icônes.
L'effet de survol est conçu pour vous aider à masquer les widgets de partage de réseaux sociaux par défaut avec des icônes sociales plus attrayantes.
En survolant VOTRE VERSION des icônes, l'utilisateur pourra voir directement les boutons J'aime, Partager et Tweeter avec un nombre réel de partages !
Partager les boutons sociaux
Colorlib partage un ensemble de boutons de partage social très léger qui utilise HTML5 pour fournir une fonctionnalité très soignée.
Vous obtenez un simple widget "icône de partage" à ajouter à votre site, mais en cliquant sur le widget, de nombreux sites de réseaux sociaux EXPANDS peuvent être utilisés pour partager du contenu ou promouvoir vos propres profils de réseaux sociaux.
À la manière habituelle de Colorlib, ces icônes sont livrées avec une bibliothèque Font Awesome complète avec toutes ses centaines d'icônes.
Boutons sociaux élégants
Chris Deacy nous apporte un ensemble d'icônes sociales élégantes qui fourniront des effets de fond de survol pour une interactivité MAXIMALE entre les icônes et l'utilisateur.
Chaque ensemble d'icônes sociales fournit de nombreuses icônes spécifiques aux réseaux sociaux, et dans celui-ci, nous trouvons Twitter, Facebook, Skype et Dribble.
Chaque fois que vous survolez l'une des icônes, l'arrière-plan de l'icône se remplit de la couleur la plus dominante de chacun des réseaux sociaux.
Une fonctionnalité plutôt sympa qui ne passera pas inaperçue !
Boutons sociaux utilisant uniquement HTML
Un ensemble d'icônes sociales HTML uniquement d'OstrIO est la solution idéale pour les webmasters, les concepteurs et les développeurs qui ont besoin d'une solution légère de partage de médias sociaux pour leurs sites Web minimalistes.
Nous convenons également que ces icônes BÉNÉFICIERONT à tout projet à grande échelle, alors ne vous laissez pas limiter par le concept HTML uniquement.
De plus, cet ensemble comporte quatre ensembles de tailles différentes, ce qui le rend très facile à intégrer dans des sites Web de toutes tailles et formes.
La disponibilité des icônes de médias sociaux va de Pinterest à VKontakte, en passant par Facebook et Twitter, et AUTRES.
Boutons de médias sociaux animés
Ces boutons de médias sociaux ont une animation soignée, mais ils sont également accompagnés d'un effet de dégradé sympa. Une fois sur votre site ou votre blog, tous vos visiteurs les remarqueront sans aucun doute.
Et une fois qu'ils planeraient au-dessus d'eux, l'excitation passera par le toit.
Pourquoi? Parce que je vous dis une chose : ils ne s'y attendaient pas !
Même si vous aimez que votre présence en ligne soit soignée, vous pouvez toujours ENRICHIR les choses avec de petits détails, comme les icônes des réseaux sociaux.
Ils n'encombreront pas votre page avec un drame, mais amélioreront plutôt l'expérience.
Icônes sociales animées
Plus d'icônes de médias sociaux animées à venir. Cette collection particulière produit le même effet pour toutes les icônes, que ce soit Facebook ou Twitter, Pinterest ou YouTube.
Lorsque vous les survolez avec le curseur de la souris, ils circulent . Ce modèle fera l'affaire pour quelque chose d'un peu plus BASIC.
Laissez votre site Web, votre blog ou votre boutique en ligne avoir des icônes de médias sociaux qui ne sont pas ennuyeuses.
Ceux-ci ne vous coûtent même pas un centime, alors mettez la main dessus et testez les choses sur votre page pour voir à quel point elles la décorent. Peu de travail pour des résultats impressionnants.
Boutons et icônes sociaux CSS
Nous admettons que de nombreux ensembles d'icônes de notre liste sont déjà vraiment époustouflants et offriront une excellente expérience de partage social à des millions d'internautes.
Ce vaste ensemble de boutons et d'icônes sociaux CSS3 révolutionnera la façon dont vous affichez vos informations de médias sociaux sur vos sites Web, applications, projets, blogs, etc.
Des simples boutons Evernote aux boutons plus TECHNIQUES comme "En savoir plus sur Smashing Magazine", ou "Disponible sur l'App Store", etc.
Ce genre d'icônes ajoutera du caractère à votre contenu. Cela augmentera également vos chances d'obtenir des partages sociaux et des ventes
Boutons sociaux circulaires
Les icônes carrées sont très dominantes sur le marché actuel des jeux d'icônes sociales.
Shahnur Alam veut aider à changer cela en fournissant (en se construisant lui-même) un grand nombre d'icônes sociales rondes pour les réseaux sociaux les plus populaires.
Cet ensemble particulier apparaît sur les sites d'écrivains MINIMALISTIC, les journaux personnels, etc.
Boutons sociaux avec polices d'icônes
David Pottrell développe et partage des trucs depuis longtemps maintenant. Ses boutons sociaux avec des polices d'icônes intégrées sont parmi les exécutions les plus fluides d'un tel concept de jeu d'icônes.
La vision de David est de fournir des solutions d'icônes sociales avec les schémas de couleurs appropriés. Pour couronner le tout, il ajoute une police d'icône de marque à côté de chaque élément. Cette ACTION scelle l'accord pour l'authenticité de chacune des icônes.
Nous sommes impressionnés par les compétences HTML5 et CSS3 que David porte à notre attention.
Bouton social FLAT Beauty avec transition CSS3
La conception FLAT n'a pas été cohérente dans notre tour d'horizon ici. Mais, nous allons essayer de résoudre ce problème en introduisant des œuvres vraiment spectaculaires et magnifiques de SMTashrik Anam.
Il veut fournir des icônes qui utilisent les EFFETS DE TRANSITION CSS3 pour amplifier une expérience de partage social dynamique et interactive.
Survolez chacune des icônes et regardez comment elles se déroulent pour découvrir le texte de votre choix.
Boutons sociaux CSS simplistes
La simplicité ne déçoit jamais, bien que certains puissent qualifier cet ensemble particulier de moderne et quelque peu complexe . Nous croyons vraiment qu'il s'agit de l'un des ensembles sociaux les plus simples de notre liste jusqu'à présent.
Vous pouvez utiliser ce modèle plutôt que des boutons de partage social direct dans nos pages de contenu. Celui-ci fonctionnera particulièrement bien dans les situations où nous voulons promouvoir nos profils. Cet ensemble prend en charge Forrst, Dribbble, Flickr, Designmoo et bien d'autres.
Prenez le temps de le vérifier et peut-être de le TESTER sur votre site avant de prendre la décision finale.
Survolez les boutons sociaux
Le jeu d'icônes Roll Over comprend les icônes Soundcloud, Pinterest, Facebook, YouTube et Twitter.
Ces icônes vous permettront d'insérer un texte de survol . Ces textes apparaîtront chaque fois qu'un visiteur survolera l'une des icônes de cet ensemble.
Hugo Darby-Brown a conçu celui-ci. Il a utilisé la technologie CSS3 pure pour créer ce modèle et offrir une expérience de partage aussi transparente.
Icônes sociales listées ci-dessus et basées sur HTML/CSS. Si vous recherchez ceux que vous pouvez utiliser dans Adobe Photoshop, Illustrator ou autre, vous voudrez peut-être vérifier cette collection d'icônes.
Faites-nous savoir si vous avez aimé le message.