Pure CSS3 Slide Social Buttons

Slide Social Buttons are created with purely CSS transforms and transitions by Christopher Yee. It uses Icon Fonts which are perfect for retina displays and are also responsive.

Demo

slide-social-css3

Browser Support

Note: Degrades gracefully for IE 8 – 9 & touch devices.

Usage

Requirements: Modernizr & Font Awesome.

Include them all in your document head:

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.0/css/font-awesome.min.css?x92026">
<link rel="stylesheet" href="path/to/your/css/slide-social-buttons.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js?x92026"></script>

Paste this code where you want to show the icons.

<section class="social-buttons">         
            <!-- Facebook -->
            <div class="slide-social">
                <div class="button">
                    <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fchristopheryee.ca%2Fslide-social-buttons%2F&amp;send=false&amp;layout=button_count&amp;width=90&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:90px; height:21px;" allowTransparency="true"></iframe>
                </div>
                <div class="facebook icon">
                    <i class="icon-facebook"></i>
                </div>
                <div class="facebook slide"><p>like</p></div>
            </div>
            <!-- Twitter -->
            <div class="slide-social">
                <div class="button">
                    <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.christopheryee.ca/slide-social-buttons" data-text="Slide Social Buttons are a fun way to display your social media buttons" data-via="cmyee">tweet</a>
                </div>
                <div class="twitter icon">
                    <i class="icon-twitter"></i>
                </div>
                <div class="twitter slide"><p>tweet</p></div>
            </div>
            <!-- Google+ -->
            <div class="slide-social">
                <div class="button">
                    <div class="g-plusone" data-size="medium"></div>
                </div>
                <div class="google-plus icon">
                    <i class="icon-google-plus"></i>
                </div>
                <div class="google-plus slide"><p>+1</p></div>
            </div>
            <!-- Linkedin -->
            <div class="slide-social">
                <div class="button">
                    <script src="//platform.linkedin.com/in.js?x92026" type="text/javascript">lang: en_US</script>
                    <script type="IN/Share" data-url="http://christopheryee.ca/slide-social-buttons/" data-counter="right"></script>
                </div>
                <div class="linkedin icon">
                    <i class="icon-linkedin"></i>
                </div>
                <div class="linkedin slide"><p>share</p></div>
            </div>
            <!-- Pinterest -->
            <div class="slide-social">
                <div class="button">
                    <a href="//pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.flickr.com%2Fphotos%2Fkentbrew%2F6851755809%2F&media=http%3A%2F%2Ffarm8.staticflickr.com%2F7027%2F6851755809_df5b2051c9_z.jpg&description=Next%20stop%3A%20Pinterest" data-pin-do="buttonPin" data-pin-config="beside"><img src="//assets.pinterest.com/images/pidgets/pin_it_button.png?x92026" /></a>
                </div>
                <div class="pinterest icon">
                    <i class="icon-pinterest"></i>
                </div>
                <div class="pinterest slide"><p>pin it</p></div>
            </div>
        </section>