21 Vorlagen für HTML5- und Bootstrap-Social-Buttons 2021
Veröffentlicht: 2021-07-22Schöpfen Sie das Potenzial sozialer Netzwerke aus, indem Sie diese besten (und coolsten) Vorlagen für soziale Schaltflächen verwenden – kostenlos.
Wir haben jede Menge verfügbarer Schaltflächen und Symbole im Internet überprüft, uns aber mit diesen 21 zufrieden gegeben.
Aufgrund der Vielfalt dieser Kollektion können Sie leicht den richtigen Stil finden .
Es endet nicht hier.
Wenn Sie möchten, können Sie sie auch entsprechend Ihrem Unternehmen und Ihrer Website verschönern und brandmarken.
Die Wirkung von Social Sharing kann sehr positive Ergebnisse bringen . Wir haben es selbst in Nischen gesehen, die auf Facebook, Instagram und anderen vielleicht nicht allzu beliebt sind.
Sie können diese sozialen Bootstrap-Buttons verwenden, um ALLES zu teilen, was Sie möchten.
Werden Sie gesellig!
Beste Social Buttons-Vorlagen
Bootstrap-Tasten V15
Wir haben jede Menge verschiedene Button-Variationen für Sie, haben uns aber entschieden, nur diejenigen aufzunehmen, die Ihnen am meisten nützen. Außerdem werden Sie feststellen, dass die Kits mehrere Buttons enthalten und nicht nur Social-Media-Buttons.
Sie GEWINNEN eine große Zeit.
Bootstrap Buttons V15 ist wahrscheinlich mein Lieblingsset aus der Liste. Die Social Buttons gibt es in zwei verschiedenen Formaten mit einem coolen Schatteneffekt, der beim Schweben verschwindet.
Bootstrap-Tasten V18
Bootstrap Buttons V18 ist eine Sammlung verschiedener Schaltflächen, die sich sehr von den anderen unterscheiden. Sie erhalten jedoch auch einige traditionellere, sodass Sie den gewünschten Weg wählen können.
Auch wenn Sie es auf den ersten Blick nicht bemerken, enthält jede Schaltfläche auch einen Schatten, der einen coolen Klickeffekt erzeugt (durch Verschwinden).
Sie können es selbst ausprobieren, indem Sie die Live-Demo-Vorschauseite besuchen.
Bootstrap-Tasten V13
Obwohl sich Bootstrap Buttons V13 auf einem dunklen Hintergrund befinden, können Sie es auch mit anderen Hintergrundstilen verwenden. Sie müssen nicht immer die Standardkonfigurationen befolgen.
Fühlen Sie sich frei, gegen den Strich zu gehen.
Hier erhalten Sie verschiedene Arten von Social-Media-Buttons, sodass Sie mit Sicherheit das Design finden, das am besten zu Ihnen passt . Die Hälfte kommt mit einer Volltonfarbe und die andere nur mit einem Umriss.
Bootstrap-Tasten V01
Ein Bündel einfacher und vielseitiger HTML-Social-Buttons, die Sie schnell in jede Website oder jeden Blog integrieren können. Sie folgen dem Branding jeder sozialen Plattform, sodass Sie sie gerne unverändert einsetzen können.
Neben der Variante mit einfarbiger Struktur gibt es auch solche mit nur einem Umriss.
Darüber hinaus verfügen beide Versionen über einen CLICK-Effekt, der durch Entfernen des Schattens funktioniert.
Ausgefallene flache Social Button Animation von Colorlib
Colorlib bringt coole CSS3-Animationen mit seinem Fancy Flat Animated Social Icon Set auf die nächste Stufe. Hier haben wir die führenden Symbole für soziale Netzwerke von LinkedIn, Twitter, Instagram, Youtube, Github und Facebook in einfache quadratische Hintergründe integriert .
Dank der Font Awesome-Bibliothek, die Ihnen zur Verfügung steht, stehen auch viele andere Symbole zur Verfügung.
Beim Bewegen/Klicken über jedes der Symbole wird eine bestimmte ANIMATION ausgelöst, die die Symbole in einen Kreis statt in das Standardquadrat verwandelt, und das kann an sich eine wirklich coole Ergänzung zu einer bereits dynamischen und interaktiven Website sein.
Social Buttons animiert mit Sass
Wenn beispielsweise jemand mit der Maus über eines der Symbole fährt, erhält er sofort einen Benachrichtigungs-Tooltip, der besagt, worum es bei diesem Symbol geht .
Icons sind auch für GitHub, E-Mail, Facebook, LinkedIn, Twitter, Instagram, Youtube und alle anderen sozialen Netzwerke verfügbar, da sie auf Font Awesome basieren.
Darüber hinaus ist das Standardfarbschema ein grauer Hintergrund mit weißem Symboltext.
Font Awesome Social Buttons Powered by Bootstrap
Stellen Sie sich vor, wenn diese beiden ein Baby hätten, würden Sie als Gegenleistung dieses großartige Icon-Set von keinem Geringeren als Stan Williams erhalten. Diese Symbole reichen bis zu GitHub, Apple, Android, Skype und Stack Overflow und der gesamten Font Awesome-Bibliothek mit Hunderten von Symbolen.
Wenn Sie Farbe und STRENG Statements für Ihre sozialen Bedürfnisse benötigen, ist dies das richtige Set.
Minimale CSS/HTML Social Buttons von Colorlib
Hier sind einige nette soziale Symbole von Colorlib. Dieses Set enthält ein graues Farbsymbol für Facebook, Twitter, Instagram, Youtube, Behance und Hunderte mehr.
Colorlib hat einen leicht zu entfernenden Rahmen hinzugefügt, der die Symbole kompakter aussehen lässt und sich viel einfacher in Designs integrieren lässt.
Sie können den Rahmen jedoch jederzeit entfernen und die Symbole nach Belieben verwenden. Zum Beispiel in den Fußzeilen- oder Kopfzeilen-Navigationsmenüs oder direkt in Ihren Inhaltsbereichen.
Social Buttons mit gleitendem Hover
Es ist einfach großartig, die Entwicklung des Webs und insbesondere die Designaspekte von Sprachen wie CSS3 und HTML5 zu sehen. Hier ist ein schönes und modernes Icon-Set von Colorlib.
Dieses Set enthält die vier wichtigsten sozialen Netzwerke (LinkedIn, Twitter und Facebook) in einer schönen Anordnung von Farben und einem Box-Layout-Gehäuse zum Aufbewahren der Symbole.
Der Hover-Effekt wurde entwickelt, um Ihnen zu helfen, die standardmäßigen sozialen Netzwerk-Sharing-Widgets mit ansprechenderen sozialen Symbolen zu maskieren.
Wenn Sie mit der Maus über IHRE VERSION der Symbole fahren, kann der Benutzer direkte Like-, Share- und Tweet-Buttons mit echten Share-Zählen sehen!
Social Buttons teilen
Colorlib teilt mit uns ein sehr leichtes Social-Sharing-Schaltflächenset, das HTML5 verwendet, um eine sehr nette Funktion bereitzustellen.
Grundsätzlich erhalten Sie ein einfaches "Sharing-Icon"-Widget, das Sie Ihrer Site hinzufügen können, aber wenn Sie auf das Widget klicken, ERWEITERT eine Reihe von Social-Networking-Sites, die zum Teilen von Inhalten oder zum Bewerben Ihrer eigenen Social-Media-Profile verwendet werden können.
In üblicher Colorlib-Manier werden diese Symbole mit der vollständigen Font Awesome-Bibliothek mit all ihren Hunderten von Symbolen geliefert.
Stilvolle Social Buttons
Chris Deacy bringt uns eine Reihe stilvoller sozialer Symbole, die Hover-Hintergrundeffekte für MAXIMALE Interaktivität zwischen den Symbolen und dem Benutzer bieten.
Jeder Satz sozialer Symbole bietet eine Reihe von Symbolen für soziale Netzwerke, und in diesem finden wir Twitter, Facebook, Skype und Dribble.
Jedes Mal, wenn Sie mit der Maus über eines der Symbole fahren, wird der Hintergrund des Symbols mit der dominantesten Farbe jedes der sozialen Netzwerke gefüllt.
Ein ziemlich cooles Feature, das nicht unbemerkt bleibt !
Social Buttons, die nur HTML verwenden
Ein HTML-only Social Icon Set von OstrIO ist die perfekte Lösung für Webmaster, Designer und Entwickler, die eine leichte Social Media Sharing Lösung für ihre minimalistischen Websites benötigen.
Wir sind uns auch einig, dass diese Icons jedem Maßstabsprojekt da draußen NUTZEN werden, also lassen Sie sich nicht durch das reine HTML-Konzept einschränken.
Darüber hinaus verfügt dieses Set über vier verschiedene Größensets, wodurch es sich super einfach in Websites jeder Größe und Form integrieren lässt.
Die Verfügbarkeit von Social-Media-Symbolen reicht von Pinterest über VKontakte bis hin zu Facebook und Twitter und ANDEREN.
Bewegen Sie den Mauszeiger über die Schaltflächen für soziale Netzwerke
Wenn Sie Ihre Website mit coolen Social-Media-Icons aufpeppen möchten, werden diese auf jeden Fall ausreichen. Mit einem raffinierten Hover-Effekt sehen sie auf den ersten Blick vielleicht ziemlich einfach aus, aber nicht so sehr, wenn Ihr Mauszeiger sie berührt.
Facebook, Pinterest, LinkedIn, YouTube Behance, was auch immer, es gibt sehr viele Lösungen, die Ihnen diese Sammlung bietet.
So ziemlich jede Schaltfläche hat einen VERSCHIEDENEN Hover-Effekt, also gehen Sie zur Vorschau und sehen Sie sie sich selbst an. Sie werden dies genießen, wenn Sie die Dinge einfach und kreativ halten möchten.
Animierte Social-Media-Buttons
Diese Social-Media-Buttons haben nicht nur eine ordentliche Animation , sondern auch einen coolen Farbverlaufseffekt . Sobald Sie auf Ihrer Website oder Ihrem Blog sind, werden sie alle Ihre Besucher ohne Zweifel bemerken.
Und sobald sie über ihnen schweben würden, wird die Aufregung durch die Decke gehen.
Wieso den? Denn eines sage ich Ihnen – sie haben es nicht erwartet!
Auch wenn Ihre Online-Präsenz so aufgeräumt und aufgeräumt ist, können Sie Dinge mit kleinen Details, wie Social-Media-Icons, immer noch anreichern.
Sie werden Ihre Seite nicht mit Dramatik überladen, sondern die Erfahrung steigern.
Animierte soziale Symbole
Weitere animierte Social-Media-Symbole kommen auf Sie zu. Diese besondere Kollektion rockt den gleichen Effekt für alle Icons, egal ob Facebook oder Twitter, Pinterest oder YouTube.
Wenn Sie mit dem Mauszeiger darüber fahren, zirkulieren sie . Für etwas mehr BASIC wird diese Vorlage definitiv den Zweck erfüllen.
Lassen Sie Ihre Website, Ihren Blog oder Ihren Online-Shop Social-Media-Symbole haben, die nicht langweilig und langweilig sind.
Diese kosten Sie nicht einmal einen Cent, also nehmen Sie sie in die Hände und testen Sie die Dinge auf Ihrer Seite, um zu sehen, wie gut sie sie dekorieren. Wenig Arbeit für tolle Ergebnisse.
CSS-Schaltflächen und -Symbole für soziale Netzwerke
Wir geben zu, dass viele der Icon-Sets auf unserer Liste bereits wirklich atemberaubend sind und Millionen von Webbenutzern ein großartiges Social-Sharing-Erlebnis bieten werden.
Dieser riesige Satz von CSS3-Social-Buttons und -Symbolen wird die Art und Weise revolutionieren, wie Sie Ihre Social-Media-Informationen auf Ihren Websites, Apps, Projekten, Blogs usw. anzeigen.
Von einfachen Evernote-Buttons bis hin zu TECHNISCHEN Buttons wie „Weiterlesen im Smashing Magazine“ oder „Im App Store erhältlich“ und so weiter.
Diese Art von Symbolen verleihen Ihren Inhalten wirklich Charakter. Dies erhöht auch Ihre Chancen auf Social Shares und anscheinend auf Verkäufe
Kreisförmige Social-Buttons
Quadratische Symbole sind auf dem aktuellen Markt für soziale Icon-Sets definitiv sehr dominant.
Shahnur Alam möchte dazu beitragen, dies zu ändern, indem er eine Vielzahl von runden sozialen Symbolen für die beliebtesten sozialen Netzwerke zur Verfügung stellt (sich selbst baut).
Wir können sehen, dass dieses spezielle Set auf MINIMALISTIC-Autorenseiten sowie in persönlichen Zeitschriften und dergleichen erscheint.
Social Buttons mit Icon-Schriftarten
David Pottrell entwickelt und teilt seit langem Sachen. Seine Social Buttons mit integrierten Icon-Fonts sind eine der reibungslosesten Umsetzungen eines solchen Icon-Set-Konzepts.
Davids Vision ist es, Social-Icon-Lösungen mit den passenden Farbschemata anzubieten. Um das Ganze abzurunden, fügt er neben jedem der Elemente eine Markensymbolschrift hinzu. Diese AKTION besiegelt den Deal für die Authentizität jedes der Symbole.
Wir sind beeindruckt von den HTML5- und CSS3-Fähigkeiten, auf die David uns aufmerksam macht.
FLAT Beauty Social Button mit CSS3-Übergang
FLAT-Design war in unserer Zusammenfassung hier nicht konsistent. Aber wir werden versuchen, dies zu beheben, indem wir einige wirklich spektakuläre und schöne Arbeiten von SMTashrik Anam vorstellen.
Er möchte Icons bereitstellen, die die CSS3 TRANSITION EFFECTS verwenden, um ein dynamisches und interaktives Social Sharing-Erlebnis zu verstärken.
Bewegen Sie die Maus über jedes der Symbole und beobachten Sie, wie sie sich entfalten, um Ihren eigenen Text Ihrer Wahl zu entdecken.
Vereinfachte CSS-Social-Buttons
Simple enttäuscht nie, obwohl manche dieses spezielle Set als modern und etwas komplex bezeichnen . Wir glauben wirklich, dass dies bisher eines der einfachsten sozialen Sets auf unserer Liste ist.
Dieser wird besonders gut in Situationen funktionieren, in denen wir unsere Profile bewerben möchten. Sie können diese Vorlage verwenden, anstatt die Schaltflächen zum direkten Teilen in sozialen Netzwerken innerhalb unserer Inhaltsseiten zu verwenden. Dieses Bundle unterstützt Forrst, Dribbble, Flickr, Designmoo und viele andere.
Nehmen Sie sich etwas Zeit, um es sich anzusehen und testen Sie es vielleicht auf Ihrer eigenen Website, bevor Sie die endgültige Entscheidung treffen.
Roll-Over-Schaltflächen für soziale Netzwerke
Roll Over Icons Set enthält Soundcloud, Pinterest, Facebook, YouTube und Twitter Icons.
Mit diesen Symbolen können Sie einen Rollover-Text einfügen . Diese Texte erscheinen jedes Mal, wenn ein Besucher über eines der Symbole aus diesem Set rollt.
Dieser wurde von Hugo Darby-Brown gefertigt. Er hat reine CSS3-Technologie verwendet, um diese Vorlage zu erstellen und ein so ANGENEHMES Sharing-Erlebnis zu bieten.
Oben aufgeführte und HTML/CSS-basierte soziale Symbole. Wenn Sie nach solchen suchen, die Sie in Adobe Photoshop, Illustrator oder auf andere Weise verwenden können, möchten Sie diese Symbolsammlung überprüfen.