Animierte & Stilvolle Teilen-Buttons

Eine Sammlung von responsiven und stilvollen Social-Media-Teilen-Buttons mit subtilen CSS-Animationen (schwebend und 'atmend' beim Überfahren mit der Maus). Farblich an die jeweiligen Marken angepasst und einfach in jedes Webprojekt zu integrieren.

Funktionen

• Modernes & Stilvolles Design: Ein sauberes und zeitgemäßes Aussehen für die Teilen-Optionen deiner Webseite.
• Subtile Animationen: Ansprechende Hover-Effekte, einschließlich eines sanften Schwebens und einer subtilen Änderung der Farbintensität ('Atmung').
• Markenfarben-Integration: Die Buttons sind mit den offiziellen Hintergrundfarben beliebter Social-Media-Plattformen gestaltet.
• Responsiv: Passt sich nahtlos an verschiedene Bildschirmgrößen und Geräte an.
• Icon-basiert: Verwendet SVG-Icons für eine scharfe Darstellung auf allen Auflösungen (du musst deine eigenen SVG-Icons bereitstellen).
• Barrierefrei: Enthält sr-only-Text für Nutzer von Bildschirmleseprogrammen, um die Barrierefreiheit zu gewährleisten.
• Einfache Integration: Simpler HTML- und CSS-Aufbau für eine schnelle Implementierung.

Unterstützte Plattformen

• Facebook
• Twitter
• E-Mail
• Threads
• Mastodon
• (Du kannst problemlos weitere hinzufügen, indem du das HTML und CSS erweiterst)

Anpassung

Du kannst das Aussehen und Verhalten der Teilen-Buttons einfach anpassen:

• Farben: Ändere die Hintergrundfarben in den .share-[plattform]-Klassen, um sie an dein Branding oder deinen bevorzugten Stil anzupassen.
• Button-Größe: Passe die width- und height-Eigenschaften der .share-button-Klasse an.
• Intensität der Animation: Ändere den translateY-Wert in @keyframes float und die rgba-Farbe in @keyframes breathe, um die Animationseffekte zu verändern.
• Hover-Effekte: Experimentiere gerne mit verschiedenen transform-, box-shadow- und anderen CSS-Eigenschaften in der .share-button:hover-Regel.
• Weitere Plattformen hinzufügen: Erweitere die HTML-Liste mit neuen <li>-Elementen und erstelle entsprechende CSS-Regeln (z.B. .share-instagram) mit der Markenfarbe der Plattform.

Mitwirken

Beiträge sind willkommen! Wenn du Ideen für Verbesserungen, neue Animationen oder Fehlerbehebungen hast, reiche bitte einen Pull Request ein oder öffne ein Issue.

Lizenz

Danksagungen

• Inspiration von verschiedenen UI/UX-Designmustern für Teilen-Buttons.
• Verwendung von Markenfarben für eine Icons

Support