Beispiele für Teilen-Schaltflächen

Dieses Beispiel zeigt vier rechteckige Buttons zum Teilen von Informationen in den beliebtesten Netzwerken. Sie haben die authentischen Farben beibehalten und zeigen die Namen und Symbole der Netzwerke. Das ist ein gutes Beispiel für Anpassungen in Fällen, in denen Sie Ihre Buttons in einem Content-Bereich platzieren möchten, zum Beispiel in einem Artikel.

So erstellen Sie Buttons, die allen Nutzern nützlich sind – das schwebende Layout lässt sie beim Scrollen nach oben und unten der Seite mitgehen und immer griffbereit bleiben. So besteht keine Chance, dass sie aus dem Blick geraten. Das Design ist minimalistisch, quadratisch und zeigt auf den Buttons nur die Icons der jeweiligen Medien.

Durch die Anpassungsoptionen erhältst du ein völlig einzigartiges Aussehen des Widgets. Diese Buttons wurden so gestaltet, dass sie den generellen Stil und die Farben der Website widerspiegeln. Sie sind schwarz-weiß, geometrisch und minimalistisch, da sie nur die Symbole der Medien tragen – ohne Beschriftungen.

Diese hübschen, kleinen Buttons wirken auf der Seite wirklich sauber und ordentlich. Sie sind rund geformt und im Materialstil und zeigen die Symbole des gewählten Mediums. Eine angenehme Hover-Animation verleiht dem Nutzererlebnis zusätzliche Lebendigkeit. Die Buttons sind zentriert ausgerichtet, Sie können aber auch links- oder rechtsbündige Varianten wählen.

Diese Buttons sind kreisförmig, doch dank der responsiven Breite wurde der Wert so angepasst, dass sie oval und robuster wirken. Der Benutzer hat die Flat-Variante des Styles gewählt, die ursprünglichen Medienfarben beibehalten, aber Schwarz hinzugefügt und bei Hover eine Bounce-Animation aktiviert.

Rechteckige Symbole sind ordentlich in einem Grid angeordnet und zeigen sowohl die Symbole als auch die Texte mit den Medientiteln. Sie passen in einen Inhaltsbereich – den Abschluss eines Artikels oder den unteren Bereich der Seite. Eine ansprechende Slider-Animation ist auf den Symbolen aktiv, und die Symbole werden beim Hover schwarz.

Der Autor hat die Beschriftungen der Buttons angepasst und bei jedem eine Handlungsaufforderung ergänzt. Es gibt keine Medien-Icons – stattdessen wurden deren Namen hinzugefügt. Der Hintergrund der Buttons wurde weiß gesetzt und die Textfarbe entspricht dem ursprünglichen Farbton jedes Mediums, um die visuelle Zuordnung zu stärken.

Um das Teilen des Inhalts für Nutzer einfach zu gestalten: In diesem Beispiel gibt es Buttons für die beliebtesten Messenger. Die Buttons behalten die Originalfarben bei und zeigen Namen und Symbol zusammen an. Sie sind abgerundet und dank automatischer Breite füllen sie exakt den richtigen Platz auf der Seite.