https://github.com/rondevhub/breathing-share-buttons
Share-Buttons mit einem subtilen 'Einatmen'-Effekt der Hintergrundfarbe beim Hovern. Modern, responsiv und einfach zu integrieren.
https://github.com/rondevhub/breathing-share-buttons
animation-css hover-effect open-source opensource share sharebuttons social social-network
Last synced: 25 days ago
JSON representation
Share-Buttons mit einem subtilen 'Einatmen'-Effekt der Hintergrundfarbe beim Hovern. Modern, responsiv und einfach zu integrieren.
- Host: GitHub
- URL: https://github.com/rondevhub/breathing-share-buttons
- Owner: RonDevHub
- License: mit
- Created: 2025-05-04T16:02:11.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-08-30T11:54:20.000Z (6 months ago)
- Last Synced: 2025-08-30T13:26:14.531Z (6 months ago)
- Topics: animation-css, hover-effect, open-source, opensource, share, sharebuttons, social, social-network
- Language: HTML
- Homepage:
- Size: 31.3 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README-en.md
- License: LICENSE
Awesome Lists containing this project
README
## README.md (English)
### Animated & Stylish Share Buttons
A collection of responsive and stylish social media share buttons with subtle CSS animations (floating and 'breathing' on hover). Color-coded to match the respective brands and easy to integrate into any web project.
#### Features
- Modern & Stylish Design: Clean and contemporary look for your website's sharing options.
- Subtle Animations: Engaging hover effects including a gentle float and a subtle 'breathing' color intensity change.
- Brand Color Integration: Buttons are styled with the official background colors of popular social media platforms.
- Responsive: Adapts seamlessly to different screen sizes and devices.
- Icon-Based: Utilizes SVG icons for crisp rendering on all resolutions (you need to provide your own SVG icons).
- Accessible: Includes sr-only text for screen reader users, ensuring accessibility.
- Easy to Integrate: Simple HTML and CSS structure for quick implementation.
#### Platforms Supported
- Facebook
- Twitter/X
- Email
- Threads
- Mastodon
- (You can easily add more by extending the HTML and CSS)
#### Customization
You can easily customize the appearance and behavior of the share buttons:
- Colors: Modify the background colors in the `.share-[platform]` classes to match your branding or preferred style.
- Button Size: Adjust the `width` and `height` properties of the `.share-button` class.
- Animation Intensity: Change the `translateY` value in the `@keyframes float` and the `rgba` color in `@keyframes breathe` to alter the animation effects.
- Hover Effects: Feel free to experiment with different `transform`, `box-shadow`, and other CSS properties in the `.share-button:hover` rule.
- Add More Platforms: Extend the HTML list with new `
#### Contributing
Contributions are welcome! If you have ideas for improvements, new animations, or bug fixes, please feel free to submit a pull request or open an issue.
#### License
This project is licensed under the MIT License - see the https://www.google.com/search?q=LICENSE file for details.
#### Acknowledgements
- Inspiration from various UI/UX design patterns for share buttons.
- Use of brand colors for a consistent user experience.