Soft UI Dashboard
Pure CSS Bootstrap social buttons with plenty of examples. Also, easy to extend or add new brands.
Facebook Twitter Instagram Github Pinterest Youtube Vimeo Slack Dribbble Reddit Tumblr LinkedIn
<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>
<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>
Add the .rounded-circle modifier class to create a fully rounded button.
.rounded-circle
<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>