Bootstrap Social Buttons

Pro Component

Pure CSS Bootstrap social buttons with plenty of examples. Also, easy to extend or add new brands.

Examples

Copy

<button type="button" class="btn btn-facebook btn-icon">
    <i class="fab fa-facebook"></i>
    Facebook
</button>
<button type="button" class="btn btn-twitter btn-icon">
    <i class="fab fa-twitter"></i>
    Twitter
</button>
<button type="button" class="btn btn-instagram btn-icon">
    <i class="fab fa-instagram"></i>
    Instagram
</button>
<button type="button" class="btn btn-pinterest btn-icon">
    <i class="fab fa-pinterest"></i>
    Pinterest
</button>
<button type="button" class="btn btn-youtube btn-icon">
    <i class="fab fa-youtube"></i>
    Youtube
</button>
<button type="button" class="btn btn-vimeo btn-icon">
    <i class="fab fa-vimeo-v"></i>
    Vimeo
</button>
<button type="button" class="btn btn-slack btn-icon">
    <i class="fab fa-slack"></i>
    Slack
</button>
<button type="button" class="btn btn-dribbble btn-icon">
    <i class="fab fa-dribbble"></i>
    Dribbble
</button>

Icon only

Copy

<button type="button" class="btn btn-facebook btn-icon-only">
    <i class="fab fa-facebook"></i>
</button>
<button type="button" class="btn btn-twitter btn-icon-only">
    <i class="fab fa-twitter"></i>
</button>
<button type="button" class="btn btn-instagram btn-icon-only">
    <i class="fab fa-instagram"></i>
</button>
<button type="button" class="btn btn-pinterest btn-icon-only">
    <i class="fab fa-pinterest"></i>
</button>
<button type="button" class="btn btn-youtube btn-icon-only">
    <i class="fab fa-youtube"></i>
</button>
<button type="button" class="btn btn-vimeo btn-icon-only">
    <i class="fab fa-vimeo-v"></i>
</button>
<button type="button" class="btn btn-slack btn-icon-only">
    <i class="fab fa-slack"></i>
</button>
<button type="button" class="btn btn-dribbble btn-icon-only">
    <i class="fab fa-dribbble"></i>
</button>

Circle

Add the .rounded-circle modifier class to create a fully rounded button.

Copy

<button type="button" class="btn btn-facebook btn-fab rounded-circle">
    <i class="fab fa-facebook"></i>
</button>
<button type="button" class="btn btn-twitter btn-fab rounded-circle">
    <i class="fab fa-twitter"></i>
</button>
<button type="button" class="btn btn-instagram btn-fab rounded-circle">
    <i class="fab fa-instagram"></i>
</button>
<button type="button" class="btn btn-pinterest btn-fab rounded-circle">
    <i class="fab fa-pinterest"></i>
</button>
<button type="button" class="btn btn-youtube btn-fab rounded-circle">
    <i class="fab fa-youtube"></i>
</button>
<button type="button" class="btn btn-vimeo btn-fab rounded-circle">
    <i class="fab fa-vimeo-v"></i>
</button>
<button type="button" class="btn btn-slack btn-fab rounded-circle">
    <i class="fab fa-slack"></i>
</button>
<button type="button" class="btn btn-dribbble btn-fab rounded-circle">
    <i class="fab fa-dribbble"></i>
</button>