# 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">
        <span class="btn-inner--icon"><i class="fab fa-facebook"></i></span>
        <span class="btn-inner--text">Facebook</span>
    </button>
    <button type="button" class="btn btn-twitter btn-icon">
        <span class="btn-inner--icon"><i class="fab fa-twitter"></i></span>
        <span class="btn-inner--text">Twitter</span>
    </button>
    <button type="button" class="btn btn-instagram btn-icon">
        <span class="btn-inner--icon"><i class="fab fa-instagram"></i></span>
        <span class="btn-inner--text">Instagram</span>
    </button>
    <button type="button" class="btn btn-github btn-icon mt-2">
        <span class="btn-inner--icon"><i class="fab fa-github"></i></span>
        <span class="btn-inner--text">Github</span>
    </button>
    <button type="button" class="btn btn-pinterest btn-icon">
        <span class="btn-inner--icon"><i class="fab fa-pinterest"></i></span>
        <span class="btn-inner--text">Pinterest</span>
    </button>
    <button type="button" class="btn btn-youtube btn-icon">
        <span class="btn-inner--icon"><i class="fab fa-youtube"></i></span>
        <span class="btn-inner--text">Youtube</span>
    </button>
    <button type="button" class="btn btn-vimeo btn-icon">
        <span class="btn-inner--icon"><i class="fab fa-vimeo-v"></i></span>
        <span class="btn-inner--text">Vimeo</span>
    </button>
    <button type="button" class="btn btn-slack btn-icon">
        <span class="btn-inner--icon"><i class="fab fa-slack"></i></span>
        <span class="btn-inner--text">Slack</span>
    </button>
    <button type="button" class="btn btn-dribbble btn-icon">
        <span class="btn-inner--icon"><i class="fab fa-dribbble"></i></span>
        <span class="btn-inner--text">Dribbble</span>
    </button>
    <button type="button" class="btn btn-reddit btn-icon mt-2">
        <span class="btn-inner--icon"><i class="fab fa-reddit"></i></span>
        <span class="btn-inner--text">Reddit</span>
    </button>
    <button type="button" class="btn btn-tumblr btn-icon mt-2">
        <span class="btn-inner--icon"><i class="fab fa-tumblr"></i></span>
        <span class="btn-inner--text">Tumblr</span>
    </button>
    <button type="button" class="btn btn-linkedin btn-icon mt-2">
        <span class="btn-inner--icon"><i class="fab fa-linkedin"></i></span>
        <span class="btn-inner--text">LinkedIn</span>
    </button>

## Icon only

Copy

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

## Circle

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

Copy

    <button type="button" class="btn btn-facebook btn-icon-only rounded-circle">
        <span class="btn-inner--icon"><i class="fab fa-facebook"></i></span>
    </button>
    <button type="button" class="btn btn-twitter btn-icon-only rounded-circle">
        <span class="btn-inner--icon"><i class="fab fa-twitter"></i></span>
    </button>
    <button type="button" class="btn btn-instagram btn-icon-only rounded-circle">
        <span class="btn-inner--icon"><i class="fab fa-instagram"></i></span>
    </button>
    <button type="button" class="btn btn-github btn-icon-only rounded-circle">
        <span class="btn-inner--icon"><i class="fab fa-github"></i></span>
    </button>
    <button type="button" class="btn btn-pinterest btn-icon-only rounded-circle">
        <span class="btn-inner--icon"><i class="fab fa-pinterest"></i></span>
    </button>
    <button type="button" class="btn btn-youtube btn-icon-only rounded-circle">
        <span class="btn-inner--icon"><i class="fab fa-youtube"></i></span>
    </button>
    <button type="button" class="btn btn-vimeo btn-icon-only rounded-circle">
        <span class="btn-inner--icon"><i class="fab fa-vimeo-v"></i></span>
    </button>
    <button type="button" class="btn btn-slack btn-icon-only rounded-circle">
        <span class="btn-inner--icon"><i class="fab fa-slack"></i></span>
    </button>
    <button type="button" class="btn btn-dribbble btn-icon-only rounded-circle">
        <span class="btn-inner--icon"><i class="fab fa-dribbble"></i></span>
    </button>
    <button type="button" class="btn btn-reddit btn-icon-only rounded-circle">
        <span class="btn-inner--icon"><i class="fab fa-reddit"></i></span>
    </button>
    <button type="button" class="btn btn-tumblr btn-icon-only rounded-circle">
        <span class="btn-inner--icon"><i class="fab fa-tumblr"></i></span>
    </button>
    <button type="button" class="btn btn-linkedin btn-icon-only rounded-circle">
        <span class="btn-inner--icon"><i class="fab fa-linkedin"></i></span>
    </button>