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.

<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