Docs
Purchase now

Social Buttons

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

Examples 

<div>
 <base-button type="facebook" icon>
     <span class="btn-inner--icon"><i class="fab fa-facebook"></i></span>
     <span class="btn-inner--text">Facebook</span>
 </base-button>
 <base-button type="twitter" icon>
     <span class="btn-inner--icon"><i class="fab fa-twitter"></i></span>
     <span class="btn-inner--text">Twitter</span>
 </base-button>
 <base-button type="google-plus" icon>
     <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 type="instagram" icon>
     <span class="btn-inner--icon"><i class="fab fa-instagram"></i></span>
     <span class="btn-inner--text">Instagram</span>
 </base-button>
 <base-button type="pinterest" icon>
     <span class="btn-inner--icon"><i class="fab fa-pinterest"></i></span>
     <span class="btn-inner--text">Pinterest</span>
 </base-button>
 <base-button type="youtube" icon>
     <span class="btn-inner--icon"><i class="fab fa-youtube"></i></span>
     <span class="btn-inner--text">Youtube</span>
 </base-button>
 <base-button type="vimeo" icon>
     <span class="btn-inner--icon"><i class="fab fa-vimeo-v"></i></span>
     <span class="btn-inner--text">Vimeo</span>
 </base-button>
 <base-button type="slack" icon>
     <span class="btn-inner--icon"><i class="fab fa-slack"></i></span>
     <span class="btn-inner--text">Slack</span>
 </base-button>
 <base-button type="dribbble" icon>
     <span class="btn-inner--icon"><i class="fab fa-dribbble"></i></span>
     <span class="btn-inner--text">Dribbble</span>
 </base-button>
</div>
Show Code

Icon only 

<div>
 <base-button type="facebook" class="btn-icon-only">
     <span class="btn-inner--icon"><i class="fab fa-facebook"></i></span>
 </base-button>
 <base-button type="twitter" class="btn-icon-only">
     <span class="btn-inner--icon"><i class="fab fa-twitter"></i></span>
 </base-button>
 <base-button type="google-plus" class="btn-icon-only">
     <span class="btn-inner--icon"><i class="fab fa-google-plus-g"></i></span>
 </base-button>
 <base-button type="instagram" class="btn-icon-only">
     <span class="btn-inner--icon"><i class="fab fa-instagram"></i></span>
 </base-button>
 <base-button type="pinterest" class="btn-icon-only">
     <span class="btn-inner--icon"><i class="fab fa-pinterest"></i></span>
 </base-button>
 <base-button type="youtube" class="btn-icon-only">
     <span class="btn-inner--icon"><i class="fab fa-youtube"></i></span>
 </base-button>
 <base-button type="vimeo" class="btn-icon-only">
     <span class="btn-inner--icon"><i class="fab fa-vimeo-v"></i></span>
 </base-button>
 <base-button type="slack" class="btn-icon-only">
     <span class="btn-inner--icon"><i class="fab fa-slack"></i></span>
 </base-button>
 <base-button type="dribbble" class="btn-icon-only">
     <span class="btn-inner--icon"><i class="fab fa-dribbble"></i></span>
 </base-button>
</div>
Show Code

Rounded 

<div>
 <base-button type="facebook" class="btn-icon-only rounded-circle">
     <span class="btn-inner--icon"><i class="fab fa-facebook"></i></span>
 </base-button>
 <base-button type="twitter" class="btn-icon-only rounded-circle">
     <span class="btn-inner--icon"><i class="fab fa-twitter"></i></span>
 </base-button>
 <base-button type="google-plus" class="btn-icon-only rounded-circle">
     <span class="btn-inner--icon"><i class="fab fa-google-plus-g"></i></span>
 </base-button>
 <base-button type="instagram" class="btn-icon-only rounded-circle">
     <span class="btn-inner--icon"><i class="fab fa-instagram"></i></span>
 </base-button>
 <base-button type="pinterest" class="btn-icon-only rounded-circle">
     <span class="btn-inner--icon"><i class="fab fa-pinterest"></i></span>
 </base-button>
 <base-button type="youtube" class="btn-icon-only rounded-circle">
     <span class="btn-inner--icon"><i class="fab fa-youtube"></i></span>
 </base-button>
 <base-button type="vimeo" class="btn-icon-only rounded-circle">
     <span class="btn-inner--icon"><i class="fab fa-vimeo-v"></i></span>
 </base-button>
 <base-button type="slack" class="btn-icon-only rounded-circle">
     <span class="btn-inner--icon"><i class="fab fa-slack"></i></span>
 </base-button>
 <base-button type="dribbble" class="btn-icon-only rounded-circle">
     <span class="btn-inner--icon"><i class="fab fa-dribbble"></i></span>
 </base-button>
</div>
Show Code

← Card →