Skip to content
master
Switch branches/tags
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
css
 
 
 
 
 
 
 
 
 
 

README.md

Slide Social Buttons

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.

View Demo

Features

  • Uses CSS transforms & transitions.
  • Uses Font Icons, perfect for retina displays.
  • It's responsive!

Requirements

Usage

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).

Thanks to