9 benutzerdefinierte CSS- und JavaScript-Social-Sharing-Schaltflächen

Jede Website sollte einige Schaltflächen für soziale Netzwerke enthalten, um den Austausch im Internet zu erhöhen. Aber die Standard-Freigabeschaltflächen sind nicht so toll und sie sind je nach Marke des Netzwerks unterschiedlich gestaltet.

Aus diesem Grund haben wir diese kleine Sammlung benutzerdefinierter Freigabeschaltflächen zusammengestellt, die Sie formatieren und auf Ihrer eigenen Website wiederverwenden können. Wenn Sie nach schönen Schaltflächen zum Teilen suchen, bieten diese Vorlagen einen großartigen Ausgangspunkt.

1. Seitenfreigabe

An erster Stelle steht eine meiner Lieblingstechniken, die von Entwickler Michael Schofield entwickelt wurde. Diese feste Social-Badge-Benutzeroberfläche für die gemeinsame Nutzung von Seiten ist auf großen Blogs und Zeitschriftenseiten sehr verbreitet.

Diese Social Badges können entweder ganz oben in der Nähe der Überschrift positioniert bleiben oder mit dem Nutzer nach unten scrollen. Ich habe keine Fallstudien gefunden, die die Unterschiede vergleichen, aber ich könnte mir vorstellen, dass die festen Schaltflächen eine höhere Anteilsanzahl aufweisen. Und in jedem Fall sind sie so gut gestaltet, dass sie nicht nach Spam oder in das Layout hineingepfuscht aussehen.

Dies ist wahrscheinlich die beste Vorlage, mit der Sie beginnen können, wenn Sie ein Blog betreiben und einige benutzerdefinierte Abzeichen zum Teilen wünschen.

2. Bildschaltflächen

Ein weiterer beliebter Stil zum Teilen ist das erneute Posten von Bildern, die auf einer Website gefunden wurden. Dies ist bei Pinterest beliebt, kann aber auch für Facebook und Twitter und sogar Google+ gut funktionieren.

Diese Bildschaltflächen sind benutzerdefinierte Designs, die reines CSS3 und einige Hintergrundlogos für jede verwenden. Sie verbinden sich noch nicht mit sozialen Netzwerken, aber die Ankerlinks können einfach für das Teilen in sozialen Netzwerken programmiert werden.

Das Design ist hier wirklich mein Fokus, weil sie an jedem Bild phänomenal aussehen. Außerdem verrät der Standort wirklich die Idee, dass Sie versuchen, das Teilen des Bildes selbst zu fördern, nicht nur des Beitrags.

3. Freigaben umschalten

Wir haben alle diese WordPress-Sharing-Widgets gesehen, die das kleine Sharing-Symbol und das Flyout-Menü verwenden. Nach einer Weile können sie fad werden, daher hilft es, sie ein wenig zu mischen.

Mit diesem Snippet können Sie Ihr Social Sharing mit einer benutzerdefinierten Animation und einem versteckten Menü neu gestalten. Es ist perfekt für jeden, der eine Website hat, die viel Austausch über mehrere Netzwerke hinweg fördern möchte.

Jedes Icon wurde in reinem CSS entworfen und die Animation wird über jQuery gesteuert. Sie sollten in der Lage sein, dies einfach in jedes Layout zu kopieren und einzufügen, damit es funktioniert. Es würde gut direkt neben die Überschrift eines Artikels passen oder sogar ganz unten, nachdem die Leute mit dem Lesen fertig sind. In jedem Fall wird es die Social Shares auf ganzer Linie erhöhen.

4. Kreisanimationen

Schauen Sie sich für ein bisschen Spaßanimation diese Kreisknöpfe an, die von Stephane Lyver erstellt wurden.

Jede Schaltfläche hat ihren eigenen Hover-to-Animate-Effekt und alle können sich perfekt in jedes Layout einfügen. Sie können sogar die Hintergrund- und Symbolfarben ändern, damit sie sich von einem einfachen weißen Hintergrund abheben.

Das Ganze läuft auf reinem CSS und die Icons werden per Bootstrap von Font Awesome gezogen.

Beachten Sie, dass diese Schaltflächen auch keine direkte Verbindung zu Social-Sharing-Links herstellen, dies kann jedoch mit dem richtigen Code leicht behoben werden.

5. Einfache Freigabeschaltflächen

Kurz, bündig und auf den Punkt gebracht beschreibt diese Sharing-Buttons am besten.

Sie verwenden einfache SVG-Icons aus dem Ionicons-Icon-Set. Aber Sie brauchen weder Ionic noch JavaScript, um diese zum Laufen zu bringen.

Stattdessen verwenden sie den href -Wert zusammen mit neuen Tab-Optionen, um Links zum Teilen direkt im Browser zu öffnen. Kein JavaScript erforderlich, keine klobigen SVGs erforderlich.

Wenn Sie in das Ionic-Iconset eintauchen, können Sie sogar andere soziale Symbole finden, die Sie vielleicht hinzufügen möchten. Außerdem haben Sie die volle Kontrolle über die Stile in CSS, sodass Sie die Größe, Auffüllung, Schriftfarbe und so ziemlich alles andere ändern können.

6. Versteckte Soziale Netzwerke

Entwickler Chris Sevilleja hat diese versteckten Schaltflächen für soziale Netzwerke alle mit reinem CSS erstellt.

Einige Websites verwenden diese Technik, um standardmäßige Freigabeabzeichen in kleinere Symbole einzubetten. Aber zugegebenermaßen ist dies eine einzigartige Animation, also kein allzu allgemeiner Trend.

Der Code ist wirklich einfach einzurichten und alles läuft über CSS, sodass Sie die volle Kontrolle haben. Chris hat sogar einen ähnlichen Stift für Google+ Social Badges entwickelt.

Beide Codeschnipsel eignen sich hervorragend für so ziemlich jede Website und die Animationen laufen in allen CSS3-kompatiblen Browsern.

7. Hover Hintergrundfarben

Hier ist nun ein wirklich einzigartiges Social-Sharing-Setup, bei dem sich die Hintergrundfarbe ändert, je nachdem, über welche Schaltfläche Sie den Mauszeiger bewegen.

Jede Schaltfläche verfügt über ein eigenes benutzerdefiniertes Symbol, das aus Font Awesome stammt, sodass Sie dieses Set sogar um andere verwandte Symbole erweitern können. Ich mag diesen Ansatz auch sehr, weil er den JavaScript-Fallback für die Hover-Änderungen hat.

Aber der Webentwickler Christopher Grabinski hat eine reine CSS-Alternative geschaffen, die genau gleich funktioniert (in unterstützten Browsern).

Ich glaube nicht, dass diese Technik auf einem größeren Blog gut aussehen würde, obwohl sie auf kleineren Websites oder kurzen Blog-Beiträgen funktionieren könnte.

8. Flyout-Freigabe

Entwickler Kyle Lavery hat einen erstaunlichen Flyout-Share-Button entwickelt, der an Googles Herangehensweise an Material-Flyouts erinnert.

Dies verwendet ein wenig JavaScript, ist aber nur 5 Zeilen lang und nicht sehr komplex. Die Magie der Animation steckt im CSS, das Sie an Ihre Bedürfnisse anpassen können.

Interessant ist auch, dass das rohe HTML wahnsinnig einfach ist. Es hat einen Haupt-Share-Container und verwendet dann div -Elemente für die Schaltflächen. Im Grunde genommen ergeben 5 Zeilen HTML und 5 Zeilen JavaScript, gemischt mit einer ganzen Menge CSS, diesen schönen Effekt.

Absolut eine der coolsten Social-Sharing-Funktionen, die ich je gesehen habe, und der Materialdesign-Stil macht es noch cooler.

9. 3D-Freigabetasten

Das letzte in meiner Sammlung ist dieses 3D-Design, das CSS-3D-Transformationen neben sozialen Schaltflächen verwendet.

Entwickler Fabrizio Bianchi hat diese Schaltflächen mit reinem CSS von den Symbolen bis zu den Transformationsanimationen erstellt. Die Hauptsymbole stammen von Font Awesome und der einzige JS-Code dient zum Einbetten der Schaltflächen darin.

Aber insgesamt ist dies eine reine CSS-Lösung, die auf jeder Website gut funktionieren sollte. Nicht jeder mag den 3D-Effekt, aber wenn er zu Ihrem Design passt, dann entscheiden Sie sich dafür.