Les médias sociaux sont ce qui unit le Web, c’est ce qui fait le lien entre Internet, une communauté privilégiée de passionnés de technologie, et une communauté qui implique tout le monde sur la planète, ou du moins ceux qui sont connectés au Web jusqu’à présent. Les médias sociaux s'habituent à rester en contact avec les amis et la famille (plus que toute autre chose), à entretenir les pages de leurs fans et de leurs activités, à diriger des entreprises directement, à apprendre de nouvelles choses, à bien des égards, à enseigner aussi à d'autres, et tout le monde peut utiliser les médias sociaux pour partager librement ce qu’ils aiment ou n’aiment pas (avec les opinions appropriées), alors les médias sociaux sont bons pour à peu près tout!
Des milliards d’utilisateurs sont déjà connectés et de nombreux autres habitants de la planète ont enfin accès à des connexions Internet stables et permanentes. L’enthousiasme suscité par la croissance du Web se fait sentir partout. Nous ne pouvons que dire à quel point il est soulagé. Sachez que le pouvoir général des réseaux sociaux est resté le même, même si nous sommes impatients de voir ce qui entraîne tout le monde ensuite.
Qu'il s'agisse de partager des histoires, d'écrire des blogs, de partager des cadeaux (musique, vidéo, création, etc.), d'accueillir une communauté, bon sang – le simple fait d'avoir un site Web invoque le besoin de boutons de partage social. Vous ne pouvez jamais être sûr du moment où quelqu'un voudra partager votre histoire avec quelqu'un d'autre, et pourquoi le rendre difficile? 99% des utilisateurs de sites Web sont déjà pleinement habitués à l’idée du partage social, il n’ya donc pas lieu de s’en inquiéter. La meilleure chose à laquelle vous devez vous intéresser est le type de boutons de partage social que vous souhaitez mettre en valeur sur votre site. leur style, leurs capacités, leur sens général.
Chaque site Web utilise un style unique, et chaque style unique fonctionne différemment avec une variété de choix que nous présentons dans cet aperçu des modèles de boutons de partage social d'aujourd'hui. Les modèles et les travaux de conception ci-dessous proviennent de développeurs et de concepteurs qui ont passé des années à utiliser HTML5 et CSS3 pour créer de superbes boutons de partage social qui attireront l'attention des visiteurs les plus inattentifs de votre site ou de ses pages.
Fantaisie Flat Social Button Animation par Colorlib
Colorlib pousse les animations CSS3 au niveau supérieur avec son jeu d'icônes sociales Fancy Flat Animated. Nous avons ici les principales icônes des réseaux sociaux LinkedIn, Twitter, Instagram, Youtube, Github et Facebook, construites dans de simples arrière-plans carrés. De nombreuses autres icônes sont également disponibles grâce à la bibliothèque Font Awesome qui est à votre disposition. En survolant / cliquant sur chacune des icônes, une animation spécifique se déclenche qui transforme les icônes en un cercle plutôt qu'en un carré par défaut, ce qui en soi peut constituer un ajout vraiment 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 SASS de Colorlib qui propose des info-bulles spécifiques pour chaque icône. Par exemple, chaque fois qu'une personne survolera l'une des icônes, elle recevra instantanément une info-bulle de notification indiquant de quoi elle consiste – que vous pouvez entièrement personnaliser pour refléter vos propres idées et messages, ou les laisser comme valeurs 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. En outre, le jeu de couleurs par défaut est un fond gris avec une icône blanche.
Police Awesome Social Buttons Powered by 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 en retour est cet impressionnant jeu d'icônes de nul autre que Stan Williams. Ces icônes s’étendront jusqu’à GitHub, Apple, Android, Skype et Stack Overflow et à l’ensemble de la bibliothèque Font Awesome de centaines d’icônes. Si vous avez besoin de couleur et de déclarations strictes pour vos besoins sociaux, c'est le jeu à acquérir.
Boutons sociaux CSS / HTML minimaux par Colorlib
Voici quelques icônes sociales intéressantes de Colorlib. Cet ensemble comprend une icône de couleur grise pour Facebook, Twitter, Instagram, Youtube, Behance et des centaines d'autres. Colorlib a ajouté une bordure facile à supprimer qui donne aux icônes une apparence plus compacte et sera beaucoup plus facile à intégrer dans les conceptions, mais vous pouvez toujours supprimer la bordure et utiliser les icônes comme vous le souhaitez – dans les menus de navigation du pied de page ou de l'en-tête, ou directement dans vos zones de contenu.
Boutons sociaux avec survol coulissant
C’est vraiment formidable de voir l’évolution du Web et plus particulièrement les aspects de conception de langages tels que 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, Google+ et Facebook) dans un bel agencement de couleurs et un boîtier en boîte pour contenir les icônes. 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, mais en survolant votre version des icônes, l'utilisateur pourra voir les boutons Aimer, Partager et Tweet directs avec un nombre de partages réel!
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. En gros, vous obtenez un simple widget 'icône de partage' à ajouter à votre site, mais lorsque vous cliquez sur le widget, un certain nombre de sites de réseaux sociaux se développent. qui peut être utilisé pour partager du contenu ou pour promouvoir vos propres profils de médias sociaux. Conformément à la mode Colorlib habituelle, ces icônes sont livrées avec la bibliothèque complète Font Awesome avec ses centaines d’icônes.
Boutons sociaux élégants
Chris Deacy nous présente un ensemble d'icônes sociales stylées qui fourniront des effets de fond en 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, parmi lesquelles figurent Google+, Twitter, Facebook, Skype et Dribble. Chaque fois que vous survolez l'une des icônes, l'arrière-plan de l'icône est rempli de la couleur la plus dominante de chacun des réseaux sociaux. Une fonctionnalité plutôt chouette qui ne passera pas inaperçue!
Boutons sociaux utilisant uniquement HTML
Un ensemble d'icônes sociales HTML uniquement créé par OstrIO est la solution idéale pour les webmasters, les concepteurs et les développeurs qui ont besoin d'une solution de partage de médias sociaux légère pour leurs sites Web minimalistes, mais nous sommes également d'accord sur le fait que ces icônes profiteront à tous les projets d'envergure. Ne vous laissez pas limiter par le concept HTML uniquement. De plus, cet ensemble comprend quatre tailles différentes, ce qui facilite son intégration dans des sites Web de toutes tailles et de toutes formes. La disponibilité des icônes de médias sociaux va de Pinterest à VKontakte, à Facebook et Twitter, et bien plus encore.
Icônes et boutons sociaux CSS
Nous admettons que bon nombre des jeux d’icônes figurant sur notre liste sont déjà époustouflants et offriront une excellente expérience de partage social à des millions d’internautes, mais ce que Stan Williams partage avec nous ici est vraiment une œuvre unique, ce Un vaste ensemble d'icônes et de boutons sociaux CSS3 va révolutionner la façon dont vous affichez les informations relatives aux médias sociaux sur vos sites Web, applications, projets, blogs, etc. Des simples boutons Evernote aux boutons plus techniques tels que «Lire plus sur Smashing Magazine» ou «Disponible sur l'App Store», etc. Ce genre d'icônes ajoutera vraiment du caractère à votre contenu. Cela augmentera également vos chances d’atteindre des parts sociales et, apparemment, des ventes.
Boutons sociaux circulaires
Les icônes carrées sont certainement très dominantes sur le marché actuel des jeux d’icônes sociales, mais Shahnur Alam veut aider à changer cela en fournissant (en construisant lui-même) un grand nombre d’icônes sociales pour les réseaux sociaux les plus populaires, connus et en interaction. Les combinaisons de couleurs semblent parfaitement bien. Nous pouvons voir cet ensemble particulier apparaître sur des sites d’écrivains minimalistes, ainsi que dans des journaux personnels et autres. Prend en charge Bootstrap.
Boutons sociaux avec polices d'icônes
David Pottrell développe et partage des contenus depuis longtemps. Son ensemble de boutons sociaux avec 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 palettes de couleurs appropriées. Pour couronner le tout, il ajoute une police d'icônes de marque à côté de chacun des éléments. 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 nous a signalées.
La conception à plat n'a pas été cohérente dans notre résumé ici. Mais nous allons essayer de résoudre ce problème en présentant quelques œuvres vraiment spectaculaires et magnifiques de S.M. Tashrik Anam. Il souhaite proposer des icônes utilisant les effets de transition CSS3 pour amplifier une expérience de partage social dynamique et interactive. Survolez chacune des icônes et observez leur déroulement pour découvrir le texte de votre choix.
Boutons sociaux simplistes CSS
Simple ne déçoit jamais, bien que certains puissent appeler cet ensemble particulier celui qui est moderne et quelque peu complexe. Nous croyons sincèrement que c'est l'un des ensembles sociaux les plus simples de notre liste à ce jour. Celui-ci fonctionnera particulièrement bien dans les situations où nous voulons 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 vérifier et peut-être de faire une démonstration sur votre propre site avant de prendre la décision finale.
Survolez les boutons sociaux
Les icônes de survol incluent les icônes Soundcloud, Pinterest, Facebook, YouTube et Twitter. Ces icônes vous permettront d’insérer un texte survolé. Ces textes apparaîtront chaque fois qu'un visiteur survolera l'une des icônes de cet ensemble. Celui-ci a été conçu par Hugo Darby-Brown. Il a utilisé la technologie CSS3 pure pour concevoir ce modèle et fournir une expérience de partage aussi agréable.
Ci-dessus, icônes sociales basées sur HTML / CSS. Si vous recherchez ceux que vous pouvez utiliser dans Adobe Photoshop, Illustrator ou autre, vous pouvez vérifier cette collection d'icônes.
