21 modèles de boutons sociaux HTML5 et Bootstrap 2021
Publié: 2021-07-22Libérez le potentiel des réseaux sociaux en utilisant ces meilleurs (et les plus cool) modèles de boutons sociaux - gratuitement.
Nous avons examiné des tas de boutons et d'icônes disponibles sur le Web, mais nous nous sommes contentés de ces 21.
Vous pouvez facilement trouver le bon style en raison de 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 du 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 très populaires sur Facebook, Instagram et autres.
Vous pouvez utiliser ces boutons sociaux Bootstrap pour partager TOUT ce que vous voulez.
Soyez sociable !
Meilleurs modèles de boutons sociaux
Boutons Bootstrap 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 et pas seulement ceux des réseaux sociaux.
Vous GAGNEZ gros.
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 Bootstrap V18
Bootstrap Buttons V18 est une collection de différents boutons très DISTINCT des autres. Pourtant, vous en obtenez aussi des plus traditionnels, vous pouvez donc choisir le chemin que vous voulez.
Même si vous ne le remarquez pas au premier abord, 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 Bootstrap V13
Même si les boutons Bootstrap V13 sont sur un fond sombre , vous pouvez également l'utiliser avec d'autres styles de fond. 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 Bootstrap 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 pouvez donc 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 ensemble d'icônes sociales Fancy Flat Animated. Ici, nous avons les principales icônes de réseaux sociaux LinkedIn, Twitter, Instagram, Youtube, Github et Facebook intégrées dans 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, et cela en soi peut être un ajout vraiment cool à un site Web déjà dynamique et interactif.
Boutons sociaux animés avec Sass
Par exemple, chaque fois que quelqu'un survolera l'une des icônes, il recevra instantanément une info-bulle de notification indiquant de quoi parle cette icône. Vous pouvez la personnaliser ENTIÈREMENT pour refléter vos propres idées et 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 tout autre réseau social car ils sont basés sur Font Awesome .
De plus, le schéma 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
Imaginez si ces deux-là avaient un bébé, ce que vous obtiendriez en retour est cet ensemble d'icônes impressionnant 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.
Si vous avez besoin de couleurs et de déclarations STRICT pour vos besoins sociaux, c'est l'ensemble à acquérir.
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 COMME VOUS VOULEZ. Par exemple, dans les menus de navigation de pied de page ou d'en-tête, ou directement dans vos zones de contenu.
Boutons sociaux avec survol coulissant
C'est tellement génial de voir l'évolution du Web et en particulier les aspects de conception de langages comme CSS3 et HTML5. Voici un jeu d'icônes magnifique et moderne provenant de Colorlib.
Cet ensemble comprend les quatre principaux réseaux sociaux (LinkedIn, Twitter et Facebook) dans un bel arrangement de couleurs et un boîtier de mise en page pour contenir les icônes à l'intérieur.
L'effet de survol est conçu pour vous aider à masquer les widgets de partage de réseau social 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 des boutons sociaux
Colorlib partage avec nous un ensemble de boutons de partage social très léger qui utilise HTML5 pour fournir une fonctionnalité très soignée.
Fondamentalement, vous obtenez un simple widget « icône de partage » à ajouter à votre site, mais en cliquant sur le widget, un certain nombre de sites de réseaux sociaux S'ÉTENDENT et peuvent être utilisés pour partager du contenu ou pour 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 d'arrière-plan de survol pour une interactivité MAXIMALE entre les icônes et l'utilisateur.
Chaque ensemble d'icônes sociales fournit un certain nombre d'icônes spécifiques aux réseaux sociaux, et dans celle-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 parfaite 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 à n'importe quel projet d'échelle, alors ne vous laissez pas limiter par le concept HTML uniquement.
De plus, cet ensemble comprend également 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.
Survolez les boutons sociaux
Si vous souhaitez pimenter les choses avec des icônes de réseaux sociaux sympas sur votre site Web, celles-ci feront certainement l'affaire. Avec un effet de survol astucieux pour eux, ils peuvent sembler assez basiques à première vue, mais pas tellement lorsque le curseur de votre souris les frappe.
Facebook, Pinterest, LinkedIn, YouTube Behance, vous l'appelez, il y a de très nombreuses solutions que cette collection vous propose.
Presque chaque bouton a un effet de survol DIFFÉRENT, alors allez-y, rendez-vous sur l'aperçu et vérifiez-les vous-même. Vous apprécierez cela si vous voulez garder les choses simples et créatives.
Boutons de médias sociaux animés
Non seulement ces boutons de médias sociaux ont une animation soignée, mais ils ont également un effet de dégradé sympa. Une fois sur votre site ou votre blog, tous vos visiteurs les remarqueront sans l'ombre d'un doute.
Et une fois qu'ils les survoleront, l'excitation montera en flèche.
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 aussi nette et ordonnée, vous pouvez toujours ENRICHIR les choses avec de petits détails, comme les icônes des réseaux sociaux.
Ils n'encombreront pas trop votre page de drame, mais renforceront 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 fait vibrer 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 . Pour quelque chose d'un peu plus BASIC, ce modèle fera certainement l'affaire.
Laissez votre site Web, votre blog ou votre boutique en ligne avoir des icônes de médias sociaux qui ne sont ni ennuyeuses ni 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 ils la décorent. Peu de travail pour des résultats impressionnants.
Boutons et icônes sociaux CSS
Nous admettons que bon nombre des 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.
Cet énorme ensemble de boutons et d'icônes sociaux CSS3 va révolutionner la façon dont vous affichez vos informations de médias sociaux sur vos sites Web, applications, projets, blogs, etc.
Des simples boutons Evernote à des boutons plus TECHNIQUES comme "Lire la suite sur Smashing Magazine", ou "Disponible sur l'App Store" et autres.
Ce genre d'icônes ajoutera vraiment du caractère à votre contenu. Cela augmentera également vos chances de décrocher des parts sociales et, apparemment, des ventes
Boutons sociaux circulaires
Les icônes carrées sont définitivement très dominantes sur le marché actuel des jeux d'icônes sociales.
Shahnur Alam veut aider à changer cela en fournissant (en se construisant) un grand nombre d'icônes sociales rondes pour les réseaux sociaux les plus populaires.
Nous pouvons voir cet ensemble particulier apparaître sur les sites d'écrivains MINIMALISTIC, ainsi que dans des journaux personnels et autres.
Boutons sociaux avec des polices d'icônes
David Pottrell développe et partage des trucs depuis longtemps maintenant. Son jeu de boutons sociaux avec des polices d'icônes intégrées est l'une des 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 chacun des éléments. Cette ACTION scelle l'affaire 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 rafle ici. Mais, nous allons essayer de résoudre ce problème en présentant un travail vraiment spectaculaire et magnifique de SMTashrik Anam.
Il souhaite 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 appeler cet ensemble particulier un ensemble moderne et quelque peu complexe . Nous pensons vraiment qu'il s'agit de l'un des ensembles sociaux les plus simples de notre liste à ce jour.
Celui-ci fonctionnera particulièrement bien dans les situations où nous souhaitons promouvoir nos profils. Vous pouvez utiliser ce modèle plutôt que des boutons de partage social directs dans nos pages de contenu. 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 propre site avant de PRENDRE la décision finale.
Survolez les boutons sociaux
Le jeu d'icônes Roll Over comprend des 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.
Celui-ci a été confectionné par Hugo Darby-Brown. Il a utilisé la technologie CSS3 pure pour créer ce modèle et offrir une expérience de partage aussi AGRÉABLE.
Icônes sociales répertorié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 consulter cette collection d'icônes.