<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-lg-10">
        <h2>Social Buttons</h2>
        <ol class="breadcrumb">
            <li>
                <a href="index.html">Home</a>
            </li>
            <li>
                <a>Miscellaneous</a>
            </li>
            <li class="active">
                <strong>Social Buttons</strong>
            </li>
        </ol>
    </div>
    <div class="col-lg-2">

    </div>
</div>
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">

                    <strong>Social Buttons</strong> Social Sign-In Buttons made in pure CSS based on Bootstrap and Font Awesome!
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>Buttons example</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">


                    <p>All available social buttons</p>

                    <a class="btn btn-block btn-social btn-adn" >
                        <span class="fa fa-adn"></span> Sign in with App.net
                    </a>
                    <a class="btn btn-block btn-social btn-bitbucket" >
                        <span class="fa fa-bitbucket"></span> Sign in with Bitbucket
                    </a>
                    <a class="btn btn-block btn-social btn-dropbox" >
                        <span class="fa fa-dropbox"></span> Sign in with Dropbox
                    </a>
                    <a class="btn btn-block btn-social btn-facebook" >
                        <span class="fa fa-facebook"></span> Sign in with Facebook
                    </a>
                    <a class="btn btn-block btn-social btn-flickr" >
                        <span class="fa fa-flickr"></span> Sign in with Flickr
                    </a>
                    <a class="btn btn-block btn-social btn-foursquare" >
                        <span class="fa fa-foursquare"></span> Sign in with Foursquare
                    </a>
                    <a class="btn btn-block btn-social btn-github" >
                        <span class="fa fa-github"></span> Sign in with GitHub
                    </a>
                    <a class="btn btn-block btn-social btn-google" >
                        <span class="fa fa-google"></span> Sign in with Google
                    </a>
                    <a class="btn btn-block btn-social btn-instagram" >
                        <span class="fa fa-instagram"></span> Sign in with Instagram
                    </a>
                    <a class="btn btn-block btn-social btn-linkedin" >
                        <span class="fa fa-linkedin"></span> Sign in with LinkedIn
                    </a>
                    <a class="btn btn-block btn-social btn-microsoft" >
                        <span class="fa fa-windows"></span> Sign in with Microsoft
                    </a>
                    <a class="btn btn-block btn-social btn-openid" >
                        <span class="fa fa-openid"></span> Sign in with OpenID
                    </a>
                    <a class="btn btn-block btn-social btn-pinterest" >
                        <span class="fa fa-pinterest"></span> Sign in with Pinterest
                    </a>
                    <a class="btn btn-block btn-social btn-reddit" >
                        <span class="fa fa-reddit"></span> Sign in with Reddit
                    </a>
                    <a class="btn btn-block btn-social btn-soundcloud" >
                        <span class="fa fa-soundcloud"></span> Sign in with SoundCloud
                    </a>
                    <a class="btn btn-block btn-social btn-tumblr" >
                        <span class="fa fa-tumblr"></span> Sign in with Tumblr
                    </a>
                    <a class="btn btn-block btn-social btn-twitter" >
                        <span class="fa fa-twitter"></span> Sign in with Twitter
                    </a>
                    <a class="btn btn-block btn-social btn-vimeo" >
                        <span class="fa fa-vimeo-square"></span> Sign in with Vimeo
                    </a>
                    <a class="btn btn-block btn-social btn-vk" >
                        <span class="fa fa-vk"></span> Sign in with VK
                    </a>
                    <a class="btn btn-block btn-social btn-yahoo" >
                        <span class="fa fa-yahoo"></span> Sign in with Yahoo!
                    </a>


                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>Example options</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">

                    <p> Icons only version</p>
                    <div class="text-center">
                        <a class="btn btn-social-icon btn-adn" ><span class="fa fa-adn"></span></a>
                        <a class="btn btn-social-icon btn-bitbucket" ><span class="fa fa-bitbucket"></span></a>
                        <a class="btn btn-social-icon btn-dropbox" ><span class="fa fa-dropbox"></span></a>
                        <a class="btn btn-social-icon btn-facebook" ><span class="fa fa-facebook"></span></a>
                        <a class="btn btn-social-icon btn-flickr" ><span class="fa fa-flickr"></span></a>
                        <a class="btn btn-social-icon btn-foursquare" ><span class="fa fa-foursquare"></span></a>
                        <a class="btn btn-social-icon btn-github" ><span class="fa fa-github"></span></a>
                        <a class="btn btn-social-icon btn-google" ><span class="fa fa-google"></span></a>
                        <a class="btn btn-social-icon btn-instagram" ><span class="fa fa-instagram"></span></a>
                        <a class="btn btn-social-icon btn-linkedin" ><span class="fa fa-linkedin"></span></a>
                        <a class="btn btn-social-icon btn-microsoft" ><span class="fa fa-windows"></span></a>
                        <a class="btn btn-social-icon btn-openid" ><span class="fa fa-openid"></span></a>
                        <a class="btn btn-social-icon btn-pinterest" ><span class="fa fa-pinterest"></span></a>
                        <a class="btn btn-social-icon btn-reddit" ><span class="fa fa-reddit"></span></a>
                        <a class="btn btn-social-icon btn-soundcloud" ><span class="fa fa-soundcloud"></span></a>
                        <a class="btn btn-social-icon btn-tumblr" ><span class="fa fa-tumblr"></span></a>
                        <a class="btn btn-social-icon btn-twitter" ><span class="fa fa-twitter"></span></a>
                        <a class="btn btn-social-icon btn-vimeo" ><span class="fa fa-vimeo-square"></span></a>
                        <a class="btn btn-social-icon btn-vk" ><span class="fa fa-vk"></span></a>
                        <a class="btn btn-social-icon btn-yahoo" ><span class="fa fa-yahoo"></span></a>
                    </div>

                    <div class="m-t-md">
                        <p>Available css social color class</p>

                        <table class="table">
                            <thead>
                            <tr>
                                <th>Class name</th>
                                <th>Service</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td><code>btn-adn</code></td>
                                <td>App.net</td>
                            </tr>
                            <tr>
                                <td><code>btn-bitbucket</code></td>
                                <td>Bitbucket</td>
                            </tr>
                            <tr>
                                <td><code>btn-dropbox</code></td>
                                <td>Dropbox</td>
                            </tr>
                            <tr>
                                <td><code>btn-facebook</code></td>
                                <td>Facebook</td>
                            </tr>
                            <tr>
                                <td><code>btn-flickr</code></td>
                                <td>Flickr</td>
                            </tr>
                            <tr>
                                <td><code>btn-foursquare</code></td>
                                <td>Foursquare</td>
                            </tr>
                            <tr>
                                <td><code>btn-github</code></td>
                                <td>Github</td>
                            </tr>
                            <tr>
                                <td><code>btn-google</code></td>
                                <td>Google</td>
                            </tr>
                            <tr>
                                <td><code>btn-instagram</code></td>
                                <td>Istagram</td>
                            </tr>
                            <tr>
                                <td><code>btn-linkedin</code></td>
                                <td>LinkedIn</td>
                            </tr>
                            <tr>
                                <td><code>btn-microsoft</code></td>
                                <td>Microsoft</td>
                            </tr>
                            <tr>
                                <td><code>btn-openid</code></td>
                                <td>OpenID</td>
                            </tr>
                            <tr>
                                <td><code>btn-pinterest</code></td>
                                <td>Pinterest</td>
                            </tr>
                            <tr>
                                <td><code>btn-reddit</code></td>
                                <td>Reddit</td>
                            </tr>
                            <tr>
                                <td><code>btn-soundcloud</code></td>
                                <td>Soundcloud</td>
                            </tr>
                            <tr>
                                <td><code>btn-tumblr</code></td>
                                <td>Tumblr</td>
                            </tr>
                            <tr>
                                <td><code>btn-twitter</code></td>
                                <td>Twitter</td>
                            </tr>
                            <tr>
                                <td><code>btn-vimeo</code></td>
                                <td>Vimeo</td>
                            </tr>
                            <tr>
                                <td><code>btn-vk</code></td>
                                <td>VK</td>
                            </tr>
                            <tr>
                                <td><code>btn-yahoo</code></td>
                                <td>Yahoo</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>

                </div>
            </div>
        </div>
    </div>


</div>