Bootstrap social buttons
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 regular buttons. If you need more information about regular buttons, be sure to read our Buttons Documentation.
Full name social buttons MDB Pro component
<!--Facebook-->
<button type="button" mdbBtn class="btn-fb waves-light" mdbWavesEffect><i class="fa fa-facebook left"></i>Facebook</button>
<!--Twitter-->
<button type="button" mdbBtn class="btn-tw waves-light" mdbWavesEffect><i class="fa fa-twitter left"></i>Twitter</button>
<!--Google +-->
<button type="button" mdbBtn class="btn-gplus waves-light" mdbWavesEffect><i class="fa fa-google-plus left"></i>Google +</button>
<!--Linkedin-->
<button type="button" mdbBtn class="btn-li waves-light" mdbWavesEffect><i class="fa fa-linkedin left"></i>Linkedin</button>
<!--Instagram-->
<button type="button" mdbBtn class="btn-ins waves-light" mdbWavesEffect><i class="fa fa-instagram left"></i>Instagram</button>
<!--Pinterest-->
<button type="button" mdbBtn class="btn-pin waves-light" mdbWavesEffect><i class="fa fa-pinterest left"></i>Pinterest</button>
<!--Youtube-->
<button type="button" mdbBtn class="btn-yt waves-light" mdbWavesEffect><i class="fa fa-youtube left"></i>Youtube</button>
<!--Vkontakte-->
<button type="button" mdbBtn class="btn-vk waves-light" mdbWavesEffect><i class="fa fa-vk left"></i>Vkontakte</button>
<!--Stack Overflow-->
<button type="button" mdbBtn class="btn-so waves-light" mdbWavesEffect><i class="fa fa-stack-overflow left"></i>Stack Overflow</button>
<!--Slack-->
<button type="button" mdbBtn class="btn-slack waves-light" mdbWavesEffect><i class="fa fa-slack left"></i>Slack</button>
<!--Github-->
<button type="button" mdbBtn class="btn-git waves-light" mdbWavesEffect><i class="fa fa-github left"></i>Github</button>
<!--Comments-->
<button type="button" mdbBtn class="btn-comm waves-light" mdbWavesEffect><i class="fa fa-comments left"></i>Comments</button>
<!--Email-->
<button type="button" mdbBtn class="btn-email waves-light" mdbWavesEffect><i class="fa fa-envelope left"></i>Email</button>
<!--Dribbble-->
<button type="button" mdbBtn class="btn-dribbble waves-light" mdbWavesEffect><i class="fa fa-dribbble left"></i>Dribbble</button>
Large button
<!--Facebook-->
<button type="button" mdbBtn size="lg" class="btn-fb waves-light" mdbWavesEffect><i class="fa fa-facebook left"></i>Facebook</button>
Full name social counters MDB Pro component
Facebook 22 Twitter 22 Google+ 22 Linkedin 22 Instagram 22 Pinterest 22 Youtube 22 Dribbble 22 Vkontakte 22 Stack Overflow 22 Slack 22 Github 22 Comments 22 Emails 22
<!--Facebook-->
<a mdbBtn class="btn-fb waves-light" mdbWavesEffect>
<i class="fa fa-facebook left"></i>
<span>Facebook</span>
</a>
<span class="counter">22</span>
<!--Twitter-->
<a mdbBtn class="btn-tw waves-light" mdbWavesEffect>
<i class="fa fa-twitter left"></i>
<span>Twitter</span>
</a>
<span class="counter">22</span>
<!--Google +-->
<a mdbBtn class="btn-gplus waves-light" mdbWavesEffect>
<i class="fa fa-google-plus left"></i>
<span>Google+</span>
</a>
<span class="counter">22</span>
<!--Linkedin-->
<a mdbBtn class="btn-li waves-light" mdbWavesEffect>
<i class="fa fa-linkedin left"></i>
<span>Linkedin</span>
</a>
<span class="counter">22</span>
<!--Instagram-->
<a mdbBtn class="btn-ins waves-light" mdbWavesEffect>
<i class="fa fa-instagram left"></i>
<span>Instagram</span>
</a>
<span class="counter">22</span>
<!--Pinterest-->
<a mdbBtn class="btn-pin waves-light" mdbWavesEffect>
<i class="fa fa-pinterest left"></i>
<span>Pinterest</span>
</a>
<span class="counter">22</span>
<!--Youtube-->
<a mdbBtn class="btn-yt waves-light" mdbWavesEffect>
<i class="fa fa-youtube left"></i>
<span>Youtube</span>
</a>
<span class="counter">22</span>
<!--Dribbble-->
<a mdbBtn class="btn-dribbble waves-light" mdbWavesEffect>
<i class="fa fa-dribbble left"></i>
<span>Dribbble</span>
</a>
<span class="counter">22</span>
<!--Vkontakte-->
<a mdbBtn class="btn-vk waves-light" mdbWavesEffect>
<i class="fa fa-vk left"></i>
<span>Vkontakte</span>
</a>
<span class="counter">22</span>
<!--Stack Overflow-->
<a mdbBtn class="btn btn-so waves-light" mdbWavesEffect>
<i class="fa fa-stack-overflow left"></i>
<span>Stack Overflow</span>
</a>
<span class="counter">22</span>
<!--Slack-->
<a mdbBtn class="btn btn-slack waves-light" mdbWavesEffect>
<i class="fa fa-slack left"></i>
<span>Slack</span>
</a>
<span class="counter">22</span>
<!--Github-->
<a mdbBtn class="btn-git waves-light" mdbWavesEffect>
<i class="fa fa-github left"></i>
<span>Github</span>
</a>
<span class="counter">22</span>
<!--Comments-->
<a mdbBtn class="btn-comm waves-light" mdbWavesEffect>
<i class="fa fa-comments left"></i>
<span>Comments</span>
</a>
<span class="counter">22</span>
<!--Emails-->
<a mdbBtn class="btn-email waves-light" mdbWavesEffect>
<i class="fa fa-envelope left"></i>
<span>Emails</span>
</a>
<span class="counter">22</span>
Simple social counters MDB Pro component
22 22 22 22 22 22 22 22 22 22 22 22 22 22
<!--Facebook-->
<a mdbBtn size="lg" class="btn-fb waves-light" mdbWavesEffect>
<i class="fa fa-facebook"></i>
</a>
<span class="counter">22</span>
<!--Twitter-->
<a mdbBtn size="lg" class="btn-tw waves-light" mdbWavesEffect>
<i class="fa fa-twitter"></i>
</a>
<span class="counter">22</span>
<!--Google +-->
<a mdbBtn size="lg" class="btn-gplus waves-light" mdbWavesEffect>
<i class="fa fa-google-plus"></i>
</a>
<span class="counter">22</span>
<!--Linkedin-->
<a mdbBtn size="lg" class="btn-li waves-light" mdbWavesEffect>
<i class="fa fa-linkedin"></i>
</a>
<span class="counter">22</span>
<!--Instagram-->
<a mdbBtn size="lg" class="btn-ins waves-light" mdbWavesEffect>
<i class="fa fa-instagram"></i>
</a>
<span class="counter">22</span>
<!--Pinterest-->
<a mdbBtn size="lg" class="btn-pin waves-light" mdbWavesEffect>
<i class="fa fa-pinterest"></i>
</a>
<span class="counter">22</span>
<!--Youtube-->
<a mdbBtn size="lg" class="btn-yt waves-light" mdbWavesEffect>
<i class="fa fa-youtube"></i>
</a>
<span class="counter">22</span>
<!--Dribbble-->
<a mdbBtn size="lg" class="btn-dribbble waves-light" mdbWavesEffect>
<i class="fa fa-dribbble left"></i>
</a>
<span class="counter">22</span>
<!--Vkontakte-->
<a mdbBtn size="lg" class="btn-vk waves-light" mdbWavesEffect>
<i class="fa fa-vk"></i>
</a>
<span class="counter">22</span>
<!--Stack Overflow-->
<a mdbBtn size="lg" class="btn btn-so waves-light" mdbWavesEffect>
<i class="fa fa-stack-overflow"></i>
</a>
<span class="counter">22</span>
<!--Slack-->
<a mdbBtn size="lg" class="btn btn-slack waves-light" mdbWavesEffect>
<i class="fa fa-slack"></i>
</a>
<span class="counter">22</span>
<!--Github-->
<a mdbBtn size="lg" class="btn-git waves-light" mdbWavesEffect>
<i class="fa fa-github"></i>
</a>
<span class="counter">22</span>
<!--Comments-->
<a mdbBtn size="lg" class="btn-comm waves-light" mdbWavesEffect>
<i class="fa fa-comments"></i>
</a>
<span class="counter">22</span>
<!--Emails-->
<a mdbBtn size="lg" class="btn-email waves-light" mdbWavesEffect>
<i class="fa fa-envelope"></i>
</a>
<span class="counter">22</span>
API Reference:
In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.
API Reference for MDB Angular Social BUttons:
// For MDB Angular Pro
import { WavesModule, ButtonsModule } from 'ng-uikit-pro-standard'
Social icons MDB Pro component