Slide Social Buttons are a fun way to display your social media buttons.
The buttons are inspired by the Supersteil blog but instead of using jQuery for the animation, they use CSS transforms & transitions.
Feel free to let me know if you use Slide Social Buttons in one of your websites.
- Uses CSS transforms & transitions.
- Uses Font Icons, perfect for retina displays.
- It's responsive!
Include Font Awesome and the Slide Social CSS in your header.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="path/to/your/css/slide-social-buttons.css">
Pick and choose which social buttons you wish to use, be sure to add the appropriate like/tweet markup and JS as required.
<div class="slide-social">
<div class="ss-button">
<!-- Place FB Like Button Here -->
</div>
<div class="facebook-bg ss-icon">
<i class="fa fa-facebook"></i>
</div>
<div class="facebook-bg ss-slide"><p>like</p></div>
</div>
You can find the markup for additional social buttons in the demo file (index.html).