Vue Argon Design System
Pure CSS Bootstrap social buttons with plenty of examples. Also, easy to extend or add new brands.
Facebook Twitter Google + Instagram Pinterest Youtube Vimeo Slack Dribbble
<base-button class="btn-icon btn-facebook" type="" icon="fa fa-facebook">Facebook</base-button> <base-button class="btn-icon btn-twitter" type="" icon="fa fa-twitter">Twitter</base-button> <base-button class="btn-icon btn-google-plus" type="" icon="fa fab fa-google-plus-g">Google +</base-button> <base-button class="btn-icon btn-instagram" type="" icon="fa fa-instagram">Instagram</base-button> <base-button class="btn-icon btn-pinterest" type="" icon="fa fa-pinterest">Pinterest</base-button> <base-button class="btn-icon btn-youtube" type="" icon="fa fa-youtube">Youtube</base-button> <base-button class="btn-icon btn-vimeo" type="" icon="fa fa-vimeo">Vimeo</base-button> <base-button class="btn-icon btn-slack" type="" icon="fa fa-slack">Slack</base-button> <base-button class="btn-icon btn-dribbble" type="" icon="fa fa-dribbble">Dribbble</base-button>
<base-button type="facebook" iconOnly><i slot="icon" class="fa fa-facebook"></i></base-button> <base-button type="twitter" iconOnly><i slot="icon" class="fa fa-twitter"></i></base-button> <base-button type="google-plus" iconOnly><i slot="icon" class="fa fa-google-plus-g"></i></base-button> <base-button type="pinterest" iconOnly><i slot="icon" class="fa fa-pinterest"></i></base-button> <base-button type="youtube" iconOnly><i slot="icon" class="fa fa-youtube"></i></base-button> <base-button type="vimeo" iconOnly><i slot="icon" class="fa fa-vimeo"></i></base-button> <base-button type="slack" iconOnly><i slot="icon" class="fa fa-slack"></i></base-button> <base-button type="dribbble" iconOnly><i slot="icon" class="fa fa-dribbble"></i></base-button>
Add rounded prop to create a fully rounded button.
rounded
<base-button type="facebook" iconOnly rounded><i slot="icon" class="fa fa-facebook"></i></base-button> <base-button type="twitter" iconOnly rounded><i slot="icon" class="fa fa-twitter"></i></base-button> <base-button type="google-plus" iconOnly rounded><i slot="icon" class="fa fa-google-plus-g"></i></base-button> <base-button type="pinterest" iconOnly rounded><i slot="icon" class="fa fa-pinterest"></i></base-button> <base-button type="youtube" iconOnly rounded><i slot="icon" class="fa fa-youtube"></i></base-button> <base-button type="vimeo" iconOnly rounded><i slot="icon" class="fa fa-vimeo"></i></base-button> <base-button type="slack" iconOnly rounded><i slot="icon" class="fa fa-slack"></i></base-button> <base-button type="dribbble" iconOnly rounded><i slot="icon" class="fa fa-dribbble"></i></base-button>