Introduction

Hard to imagine a good website or app without integration with Social Media.

With MDB it's child's play. We provide you buttons for the most popular social networks.

They work the same way as a regular buttons. If you need more information about regular buttons read our Buttons Documentation.

Full name social buttons Premium component

<!--Facebook-->
<button type="button" class="btn btn-fb"><i class="fa fa-facebook left"></i> Facebook</button>
<!--Twitter-->
<button type="button" class="btn btn-tw"><i class="fa fa-twitter left"></i> Twitter</button>
<!--Google +-->
<button type="button" class="btn btn-gplus"><i class="fa fa-google-plus left"></i> Google +</button>
<!--Linkedin-->
<button type="button" class="btn btn-li"><i class="fa fa-linkedin left"></i> Linkedin</button>
<!--Instagram-->
<button type="button" class="btn btn-ins"><i class="fa fa-instagram left"></i> Instagram</button>
<!--Pinterest-->
<button type="button" class="btn btn-pin"><i class="fa fa-pinterest left"></i> Pinterest</button>
<!--Youtube-->
<button type="button" class="btn btn-yt"><i class="fa fa-youtube left"></i> Youtube</button>
<!--Vkontakte-->
<button type="button" class="btn btn-vk"><i class="fa fa-vk left"></i> Vkontakte</button>
<!--Stack Overflow-->
<button type="button" class="btn btn-so"><i class="fa fa-stack-overflow left"></i> Stack Overflow</button>
<!--Github-->
<button type="button" class="btn btn-git"><i class="fa fa-github left"></i> Github</button>
<!--Comments-->
<button type="button" class="btn btn-comm"><i class="fa fa-comments left"></i> Comments</button>
<!--Email-->
<button type="button" class="btn btn-email"><i class="fa fa-envelope left"></i> Email</button>
<!--Dribbble-->
<button type="button" class="btn btn-dribbble"><i class="fa fa-dribbble left"></i> Dribbble</button>

Large button

                        <!--Facebook-->
                        <button type="button" class="btn btn-lg btn-fb"><i class="fa fa-facebook left"></i> Facebook</button>
                        

Simple social buttons Premium component

<!--Facebook-->
<button type="button" class="btn btn-fb"><i class="fa fa-facebook"></i></button>
<!--Twitter-->
<button type="button" class="btn btn-tw"><i class="fa fa-twitter"></i></button>
<!--Google +-->
<button type="button" class="btn btn-gplus"><i class="fa fa-google-plus"></i></button>
<!--Linkedin-->
<button type="button" class="btn btn-li"><i class="fa fa-linkedin"></i></button>
<!--Instagram-->
<button type="button" class="btn btn-ins"><i class="fa fa-instagram"></i></button>
<!--Pinterest-->
<button type="button" class="btn btn-pin"><i class="fa fa-pinterest"></i></button>
<!--Youtube-->
<button type="button" class="btn btn-yt"><i class="fa fa-youtube"></i></button>
<!--Dribbble-->
<button type="button" class="btn btn-dribbble"><i class="fa fa-dribbble left"></i></button>
<!--Vkontakte-->
<button type="button" class="btn btn-vk"><i class="fa fa-vk"></i></button>
<!--Stack Overflow-->
<button type="button" class="btn btn-so"><i class="fa fa-stack-overflow"></i></button>
<!--Github-->
<button type="button" class="btn btn-git"><i class="fa fa-github"></i></button>
<!--Comments-->
<button type="button" class="btn btn-comm"><i class="fa fa-comments"></i></button>
<!--Email-->
<button type="button" class="btn btn-email"><i class="fa fa-envelope"></i></button>

Large button

<!--Facebook-->
<button type="button" class="btn btn-lg btn-fb"><i class="fa fa-facebook"></i></button>

Floating social buttons Premium component

<!--Facebook-->
<a type="button" class="btn-floating btn-large btn-fb"><i class="fa fa-facebook"></i></a>
<!--Twitter-->
<a type="button" class="btn-floating btn-large btn-tw"><i class="fa fa-twitter"></i></a>
<!--Google +-->
<a type="button" class="btn-floating btn-large btn-gplus"><i class="fa fa-google-plus"></i></a>
<!--Linkedin-->
<a type="button" class="btn-floating btn-large btn-li"><i class="fa fa-linkedin"></i></a>
<!--Instagram-->
<a type="button" class="btn-floating btn-large btn-ins"><i class="fa fa-instagram"></i></a>
<!--Pinterest-->
<a type="button" class="btn-floating btn-large btn-pin"><i class="fa fa-pinterest"></i></a>
<!--Youtube-->
<a type="button" class="btn-floating btn-large btn-yt"><i class="fa fa-youtube"></i></a>
<!--Dribbble-->
<a type="button" class="btn-floating btn-large btn-dribbble"><i class="fa fa-dribbble"></i></a>
<!--Vkontakte-->
<a type="button" class="btn-floating btn-large btn-vk"><i class="fa fa-vk"></i></a>
<!--Stack Overflow-->
<a type="button" class="btn-floating btn-large btn-so"><i class="fa fa-stack-overflow"></i></a>
<!--Github-->
<a type="button" class="btn-floating btn-large btn-git"><i class="fa fa-github"></i></a>
<!--Comments-->
<a type="button" class="btn-floating btn-large btn-comm"><i class="fa fa-comments"></i></a>
<!--Email-->
<a type="button" class="btn-floating btn-large btn-email"><i class="fa fa-envelope"></i></a>

Small button

                        <!--Facebook-->
                        <a type="button" class="btn-floating btn-small btn-fb"><i class="fa fa-facebook"></i></a>
                        

Full name social counters Premium component

<!--Facebook-->
<a class="btn btn-fb">
    <i class="fa fa-facebook left"></i>
    <span>Facebook</span>
</a>
<span class="counter">22</span>

<!--Twitter-->
<a class="btn btn-tw">
    <i class="fa fa-twitter left"></i>
    <span>Twitter</span>
</a>
<span class="counter">22</span>

<!--Google +-->
<a class="btn btn-gplus">
    <i class="fa fa-google-plus left"></i>
    <span>Google+</span>
</a>
<span class="counter">22</span>

<!--Linkedin-->
<a class="btn btn-li">
    <i class="fa fa-linkedin left"></i>
    <span>Linkedin</span>
</a>
<span class="counter">22</span>

<!--Instagram-->
<a class="btn btn-ins">
    <i class="fa fa-instagram left"></i>
    <span>Instagram</span>
</a>
<span class="counter">22</span>

<!--Pinterest-->
<a class="btn btn-pin">
    <i class="fa fa-pinterest left"></i>
    <span>Pinterest</span>
</a>
<span class="counter">22</span>

<!--Youtube-->
<a class="btn btn-yt">
    <i class="fa fa-youtube left"></i>
    <span>Youtube</span>
</a>
<span class="counter">22</span>

<!--Dribbble-->
<a class="btn btn-dribbble">
    <i class="fa fa-dribbble left"></i>
    <span>Dribbble</span>
</a>
<span class="counter">22</span>

<!--Vkontakte-->
<a class="btn btn-vk">
    <i class="fa fa-vk left"></i>
    <span>Vkontakte</span>
</a>
<span class="counter">22</span>

<!--Stack Overflow-->
<a class="btn btn-so">
    <i class="fa fa-stack-overflow left"></i>
    <span>Stack Overflow</span>
</a>
<span class="counter">22</span>

<!--Github-->
<a class="btn btn-git">
    <i class="fa fa-github left"></i>
    <span>Github</span>
</a>
<span class="counter">22</span>

<!--Comments-->
<a class="btn btn-comm">
    <i class="fa fa-comments left"></i>
    <span>Comments</span>
</a>
<span class="counter">22</span>

<!--Emails-->
<a class="btn btn-email">
    <i class="fa fa-envelope left"></i>
    <span>Emails</span>
</a>
<span class="counter">22</span>

Simple social counters Premium component

<!--Facebook-->
<a class="btn btn-fb btn-lg">
    <i class="fa fa-facebook"></i>
</a>
<span class="counter">22</span>

<!--Twitter-->
<a class="btn btn-tw btn-lg">
    <i class="fa fa-twitter"></i>
</a>
<span class="counter">22</span>

<!--Google +-->
<a class="btn btn-gplus btn-lg">
    <i class="fa fa-google-plus"></i>
</a>
<span class="counter">22</span>

<!--Linkedin-->
<a class="btn btn-li btn-lg">
    <i class="fa fa-linkedin"></i>
</a>
<span class="counter">22</span>

<!--Instagram-->
<a class="btn btn-ins btn-lg">
    <i class="fa fa-instagram"></i>
</a>
<span class="counter">22</span>

<!--Pinterest-->
<a class="btn btn-pin btn-lg">
    <i class="fa fa-pinterest"></i>
</a>
<span class="counter">22</span>

<!--Youtube-->
<a class="btn btn-yt btn-lg">
    <i class="fa fa-youtube"></i>
</a>
<span class="counter">22</span>

<!--Dribbble-->
<a class="btn btn-dribbble btn-lg">
    <i class="fa fa-dribbble left"></i>
</a>
<span class="counter">22</span>

<!--Vkontakte-->
<a class="btn btn-vk btn-lg">
    <i class="fa fa-vk"></i>
</a>
<span class="counter">22</span>

<!--Stack Overflow-->
<a class="btn btn-so btn-lg">
    <i class="fa fa-stack-overflow"></i>
</a>
<span class="counter">22</span>

<!--Github-->
<a class="btn btn-git btn-lg">
    <i class="fa fa-github"></i>
</a>
<span class="counter">22</span>

<!--Comments-->
<a class="btn btn-comm btn-lg">
    <i class="fa fa-comments"></i>
</a>
<span class="counter">22</span>

<!--Emails-->
<a class="btn btn-email btn-lg">
    <i class="fa fa-envelope"></i>
</a>
<span class="counter">22</span>

Social Icons Premium component

<!--Facebook-->
<a class="icons-sm fb-ic"><i class="fa fa-facebook"> </i></a>
<!--Twitter-->
<a class="icons-sm tw-ic"><i class="fa fa-twitter"> </i></a>
<!--Google +-->
<a class="icons-sm gplus-ic"><i class="fa fa-google-plus"> </i></a>
<!--Linkedin-->
<a class="icons-sm li-ic"><i class="fa fa-linkedin"> </i></a>
<!--Instagram-->
<a class="icons-sm ins-ic"><i class="fa fa-instagram"> </i></a>
<!--Pinterest-->
<a class="icons-sm pin-ic"><i class="fa fa-pinterest"> </i></a>
<!--Vkontakte-->
<a class="icons-sm vk-ic"><i class="fa fa-vk"> </i></a>
<!--Youtube-->
<a class="icons-sm yt-ic"><i class="fa fa-youtube"> </i></a>
<!--Dribbble-->
<a class="icons-sm dribbble-ic"><i class="fa fa-dribbble"> </i></a>
<!--Stack Overflow-->
<a class="icons-sm so-ic"><i class="fa fa-stack-overflow"> </i></a>
<!--Github-->
<a class="icons-sm git-ic"><i class="fa fa-github"> </i></a>
<!--Comments-->
<a class="icons-sm comm-ic"><i class="fa fa-comments"> </i></a>
<!--Email-->
<a class="icons-sm email-ic"><i class="fa fa-envelope-o"> </i></a>

Social list Premium component

<div class="col-md-6">

    <ul class="social-list">
        <li><a class="icons-sm fb-ic"><i class="fa fa-facebook"></i> Facebook</a></li>
        <li><a class="icons-sm tw-ic"><i class="fa fa-twitter"></i> Twitter</a></li>
        <li><a class="icons-sm gplus-ic"><i class="fa fa-google-plus"></i> Google +</a></li>
        <li><a class="icons-sm li-ic"><i class="fa fa-linkedin"> </i> LinkedIn</a></li>
        <li><a class="icons-sm ins-ic"><i class="fa fa-instagram"> </i> Instagram</a></li>
        <li><a class="icons-sm pin-ic"><i class="fa fa-pinterest"> </i> Pinterest</a></li>
        <li><a class="icons-sm pin-vk"><i class="fa fa-vk"> </i> Vkontakte</a></li>
        <li><a class="icons-sm yt-ic"><i class="fa fa-youtube"> </i> Youtube</a></li>
        <li><a class="icons-sm dribbble-ic"><i class="fa fa-dribbble"> </i> Dribbble</a></li>
        <li><a class="icons-sm git-ic"><i class="fa fa-github"> </i> Github</a></li>
        <li><a class="icons-sm so-ic"><i class="fa fa-stack-overflow"> </i> Stack Overflow</a></li>
        <li><a class="icons-sm comm-ic"><i class="fa fa-comments"> </i> Comments</a></li>
        <li><a class="icons-sm email-ic"><i class="fa fa-envelope-o"> </i> Email</a></li>
    </ul>

</div>