BootstrapVue Argon Dashboard
Pure CSS BootstrapVue social buttons with plenty of examples. Also, easy to extend or add new brands.
<base-button icon class="btn-facebook btn-icon"> <span class="btn-inner--icon"><i class="fab fa-facebook"></i></span> <span class="btn-inner--text">Facebook</span> </base-button> <base-button icon class="btn-twitter"> <span class="btn-inner--icon"><i class="fab fa-twitter"></i></span> <span class="btn-inner--text">Twitter</span> </base-button> <base-button icon class="btn-google-plus"> <span class="btn-inner--icon"><i class="fab fa-google-plus-g"></i></span> <span class="btn-inner--text">Google +</span> </base-button> <base-button icon class="btn-instagram"> <span class="btn-inner--icon"><i class="fab fa-instagram"></i></span> <span class="btn-inner--text">Instagram</span> </base-button> <base-button icon class="btn-pinterest"> <span class="btn-inner--icon"><i class="fab fa-pinterest"></i></span> <span class="btn-inner--text">Pinterest</span> </base-button> <base-button icon class="btn-youtube"> <span class="btn-inner--icon"><i class="fab fa-youtube"></i></span> <span class="btn-inner--text">Youtube</span> </base-button> <base-button icon class="btn-vimeo"> <span class="btn-inner--icon"><i class="fab fa-vimeo-v"></i></span> <span class="btn-inner--text">Vimeo</span> </base-button> <base-button icon class="btn-slack"> <span class="btn-inner--icon"><i class="fab fa-slack"></i></span> <span class="btn-inner--text">Slack</span> </base-button> <base-button icon class="btn-dribbble"> <span class="btn-inner--icon"><i class="fab fa-dribbble"></i></span> <span class="btn-inner--text">Dribbble</span> </base-button>
<base-button class="btn-facebook btn-icon-only"> <span class="btn-inner--icon"><i class="fab fa-facebook"></i></span> </base-button> <base-button class="btn-twitter btn-icon-only"> <span class="btn-inner--icon"><i class="fab fa-twitter"></i></span> </base-button> <base-button class="btn-google-plus btn-icon-only"> <span class="btn-inner--icon"><i class="fab fa-google-plus-g"></i></span> </base-button> <base-button class="btn-instagram btn-icon-only"> <span class="btn-inner--icon"><i class="fab fa-instagram"></i></span> </base-button> <base-button class="btn-pinterest btn-icon-only"> <span class="btn-inner--icon"><i class="fab fa-pinterest"></i></span> </base-button> <base-button class="btn-youtube btn-icon-only"> <span class="btn-inner--icon"><i class="fab fa-youtube"></i></span> </base-button> <base-button class="btn-vimeo btn-icon-only"> <span class="btn-inner--icon"><i class="fab fa-vimeo-v"></i></span> </base-button> <base-button class="btn-slack btn-icon-only"> <span class="btn-inner--icon"><i class="fab fa-slack"></i></span> </base-button> <base-button class="btn-dribbble btn-icon-only"> <span class="btn-inner--icon"><i class="fab fa-dribbble"></i></span> </base-button>
Add the .rounded-circle modifier class to create a fully rounded button.
.rounded-circle
<base-button round class="btn-facebook btn-icon-only"> <span class="btn-inner--icon"><i class="fab fa-facebook"></i></span> </base-button> <base-button round class="btn-twitter btn-icon-only"> <span class="btn-inner--icon"><i class="fab fa-twitter"></i></span> </base-button> <base-button round class="btn-google-plus btn-icon-only"> <span class="btn-inner--icon"><i class="fab fa-google-plus-g"></i></span> </base-button> <base-button round class="btn-instagram btn-icon-only"> <span class="btn-inner--icon"><i class="fab fa-instagram"></i></span> </base-button> <base-button round class="btn-pinterest btn-icon-only"> <span class="btn-inner--icon"><i class="fab fa-pinterest"></i></span> </base-button> <base-button round class="btn-youtube btn-icon-only"> <span class="btn-inner--icon"><i class="fab fa-youtube"></i></span> </base-button> <base-button round class="btn-vimeo btn-icon-only"> <span class="btn-inner--icon"><i class="fab fa-vimeo-v"></i></span> </base-button> <base-button round class="btn-slack btn-icon-only"> <span class="btn-inner--icon"><i class="fab fa-slack"></i></span> </base-button> <base-button round class="btn-dribbble btn-icon-only"> <span class="btn-inner--icon"><i class="fab fa-dribbble"></i></span> </base-button>