Buttons socialPRO

Use a variety of social buttons, including brands and commonly used elements like comments, mail or share.

Social buttons are an extension of regular buttons and provide a color that matches a social functio or brand. Use the .btn-{variant} class, where variant can be comments, email, share, facebook, twitter, snapchat, linkedin, instagram, pinterest, youtube, stackoverflow, github, dribbbble or slack.

Comments Email Share Facebook Twitter Snapchat LinkedIn Instagram Pinterest Youtube Stack Overflow Github Dribbble Slack 

<a href="" class="btn btn-comments"><i class="fas fa-comments"></i> Comments</a>
<a href="" class="btn btn-email"><i class="fas fa-envelope"></i> Email</a>
<a href="" class="btn btn-share"><i class="fas fa-share-alt"></i> Share</a>

<a href="" class="btn btn-facebook"><i class="fab fa-facebook"></i> Facebook</a>
<a href="" class="btn btn-twitter"><i class="fab fa-twitter"></i> Twitter</a>
<a href="" class="btn btn-snapchat"><i class="fab fa-snapchat-ghost"></i> Snapchat</a>
<a href="" class="btn btn-linkedin"><i class="fab fa-linkedin"></i> LinkedIn</a>
<a href="" class="btn btn-instagram"><i class="fab fa-instagram"></i> Instagram</a>
<a href="" class="btn btn-pinterest"><i class="fab fa-pinterest"></i> Pinterest</a>
<a href="" class="btn btn-youtube"><i class="fab fa-youtube"></i> Youtube</a>
<a href="" class="btn btn-stackoverflow"><i class="fab fa-stack-overflow"></i> Stack Overflow</a>
<a href="" class="btn btn-github"><i class="fab fa-github"></i> Github</a>
<a href="" class="btn btn-dribbble"><i class="fab fa-dribbble"></i> Dribbble</a>
<a href="" class="btn btn-slack"><i class="fab fa-slack"></i> Slack</a>

Play with existing button modifiers, such as .btn-round, to create various styles. 


<a href="" class="btn btn-comments"><i class="fas fa-comments"></i></a>
<a href="" class="btn btn-email"><i class="fas fa-envelope"></i></a>
<a href="" class="btn btn-share"><i class="fas fa-share-alt"></i></a>

<a href="" class="btn btn-round btn-github"><i class="fab fa-github"></i></a>
<a href="" class="btn btn-round btn-slack"><i class="fab fa-slack"></i></a>
<a href="" class="btn btn-round btn-stackoverflow"><i class="fab fa-stack-overflow"></i></a>

Icon buttons

Show just the icon as a button, with .btn-icon and .icon-{variant}, without any background or border. 


<a href="" class="btn btn-icon icon-comments"><i class="fas fa-comments"></i></a>
<a href="" class="btn btn-icon icon-email"><i class="fas fa-envelope"></i></a>
<a href="" class="btn btn-icon icon-share"><i class="fas fa-share-alt"></i></a>

<a href="" class="btn btn-icon icon-github"><i class="fab fa-github"></i></a>
<a href="" class="btn btn-icon icon-slack"><i class="fab fa-slack"></i></a>
<a href="" class="btn btn-icon icon-stackoverflow"><i class="fab fa-stack-overflow"></i></a>

Read more

Buttons Cards