Social Buttons Component

The buttons of social networks are important elements to share information about our site, it is the way to link with your visitors, observe the great variety of classic buttons, in different colors, sizes and states.
These are some of the many social buttons that you can create with the font-awesome icons.


Observations

Before using read the information in the buttons section, since the social buttons share their classes.


Sizes


Spotify interest Linked
  <!-- Small Buttons -->
  <a class="e-btn circle small success"><i class="fab fa-spotify"></i></a>
  <a class="e-btn small success"><i class="fab fa-spotify"></i> Spotify</a>
  <!-- Normal Buttons -->
  <a class="e-btn circle danger"><i class="fab fa-pinterest-p"></i></a>
  <a class="e-btn danger"><i class="fab fa-pinterest-p"></i>interest</a>
  <!-- Plus Buttons -->
  <a class="e-btn circle plus primary"><i class="fab fa-linkedin-in"></i></a>
  <a class="e-btn plus primary">Linked<i class="fab fa-linkedin-in"></i></a>
 

Basic Buttons


acebook Instagram Twitter Whatsapp Youtube GitHub oogle

Spotify interest Linked Stack-overflow Slack Dropbox Twitch
  <a class="e-btn primary"><i class="fab fa-facebook-f"></i>acebook</a>
  <a class="e-btn inst-gradient"><i class="fab fa-instagram"></i> Instagram</a>
  <a class="e-btn sky"><i class="fab fa-twitter"></i> Twitter</a>
  <a class="e-btn success"><i class="fab fa-whatsapp"></i> Whatsapp</a>
  <a class="e-btn danger"><i class="fab fa-youtube"></i> Youtube</a>
  <a class="e-btn dark"><i class="fab fa-github"></i> GitHub</a>
  <a class="e-btn danger"><i class="fab fa-google"></i>oogle</a>
  <a class="e-btn success"><i class="fab fa-spotify"></i> Spotify</a>
  <a class="e-btn danger"><i class="fab fa-pinterest-p"></i>interest</a>
  <a class="e-btn primary">Linked<i class="fab fa-linkedin-in"></i></a>
  <a class="e-btn warning text-white"><i class="fab fa-stack-overflow"></i> Stack-overflow</a>
  <a class="e-btn success"><i class="fab fa-slack-hash"></i> Slack</a>
  <a class="e-btn sky"><i class="fab fa-dropbox"></i> Dropbox</a>
  <a class="e-btn purple"><i class="fab fa-twitch"></i> Twitch</a>
 

White Buttons


acebook Instagram Twitter Whatsapp Youtube GitHub oogle

Spotify interest Linked Stack-overflow Slack Dropbox Twitch
 <a class="e-btn outlined primary"><i class="fab fa-facebook-f"></i>acebook</a>
 <a class="e-btn outlined white"><i class="fab fa-instagram"></i> Instagram</a>
 <a class="e-btn outlined sky"><i class="fab fa-twitter"></i> Twitter</a>
 <a class="e-btn outlined success"><i class="fab fa-whatsapp"></i> Whatsapp</a>
 <a class="e-btn outlined danger"><i class="fab fa-youtube"></i> Youtube</a>
 <a class="e-btn outlined dark"><i class="fab fa-github"></i> GitHub</a>
 <a class="e-btn outlined danger"><i class="fab fa-google"></i>oogle</a>
 <a class="e-btn outlined success"><i class="fab fa-spotify"></i> Spotify</a>
 <a class="e-btn outlined danger"><i class="fab fa-pinterest-p"></i>interest</a>
 <a class="e-btn outlined primary">Linked<i class="fab fa-linkedin-in"></i></a>
 <a class="e-btn outlined warning"><i class="fab fa-stack-overflow"></i> Stack-overflow</a>
 <a class="e-btn outlined success"><i class="fab fa-slack-hash"></i> Slack</a>
 <a class="e-btn outlined sky"><i class="fab fa-dropbox"></i> Dropbox</a>
 <a class="e-btn outlined purple"><i class="fab fa-twitch"></i> Twitch</a>
 

Anime Buttons


acebook Instagram Twitter Whatsapp Youtube GitHub oogle

Spotify interest Linked Stack-overflow Slack Dropbox Twitch
 <a class="e-btn anime primary"><i class="fab fa-facebook-f"></i>acebook</a>
 <a class="e-btn anime inst-gradient"><i class="fab fa-instagram"></i> Instagram</a>
 <a class="e-btn anime sky"><i class="fab fa-twitter"></i> Twitter</a>
 <a class="e-btn anime success"><i class="fab fa-whatsapp"></i> Whatsapp</a>
 <a class="e-btn anime danger"><i class="fab fa-youtube"></i> Youtube</a>
 <a class="e-btn anime dark"><i class="fab fa-github"></i> GitHub</a>
 <a class="e-btn anime danger"><i class="fab fa-google"></i>oogle</a>
 <a class="e-btn anime success"><i class="fab fa-spotify"></i> Spotify</a>
 <a class="e-btn anime danger"><i class="fab fa-pinterest-p"></i>interest</a>
 <a class="e-btn anime primary">Linked<i class="fab fa-linkedin-in"></i></a>
 <a class="e-btn anime warning text-white"><i class="fab fa-stack-overflow"></i> Stack-overflow</a>
 <a class="e-btn anime success"><i class="fab fa-slack-hash"></i> Slack</a>
 <a class="e-btn anime sky"><i class="fab fa-dropbox"></i> Dropbox</a>
 <a class="e-btn anime purple"><i class="fab fa-twitch"></i> Twitch</a>
 

Circle Buttons


 <a class="e-btn circle primary"><i class="fab fa-facebook-f"></i></a>
 <a class="e-btn circle inst-gradient"><i class="fab fa-instagram"></i></a>
 <a class="e-btn circle sky"><i class="fab fa-twitter"></i></a>
 <a class="e-btn circle success"><i class="fab fa-whatsapp"></i></a>
 <a class="e-btn circle danger"><i class="fab fa-youtube"></i></a>
 <a class="e-btn circle dark"><i class="fab fa-github"></i></a>
 <a class="e-btn circle danger"><i class="fab fa-google"></i></a>
 <a class="e-btn circle success"><i class="fab fa-spotify"></i></a>
 <a class="e-btn circle danger"><i class="fab fa-pinterest-p"></i></a>
 <a class="e-btn circle primary"><i class="fab fa-linkedin-in"></i></a>
 <a class="e-btn circle warning text-white"><i class="fab fa-stack-overflow"></i></a>
 <a class="e-btn circle success"><i class="fab fa-slack-hash"></i></a>
 <a class="e-btn circle sky"><i class="fab fa-dropbox"></i></a>
 <a class="e-btn circle purple"><i class="fab fa-twitch"></i></a>
 

White circle buttons


 <a class="e-btn circle white"><i class="fab fa-facebook-f text-primary"></i></a>
 <a class="e-btn circle white"><i class="fab fa-instagram"></i></a>
 <a class="e-btn circle white"><i class="fab fa-twitter text-sky"></i></a>
 <a class="e-btn circle white"><i class="fab fa-whatsapp text-success"></i></a>
 <a class="e-btn circle white"><i class="fab fa-youtube text-danger"></i></a>
 <a class="e-btn circle white"><i class="fab fa-github text-dark"></i></a>
 <a class="e-btn circle white"><i class="fab fa-google text-danger"></i></a>
 <a class="e-btn circle white"><i class="fab fa-spotify text-success"></i></a>
 <a class="e-btn circle white"><i class="fab fa-pinterest-p text-danger"></i></a>
 <a class="e-btn circle white"><i class="fab fa-linkedin-in text-primary"></i></a>
 <a class="e-btn circle white"><i class="fab fa-stack-overflow text-warning"></i></a>
 <a class="e-btn circle white"><i class="fab fa-slack-hash text-success"></i></a>
 <a class="e-btn circle white"><i class="fab fa-dropbox text-sky"></i></a>
 <a class="e-btn circle white"><i class="fab fa-twitch text-purple"></i></a>
 

Simple Buttons


 <a class="e-btn primary"><i class="fab fa-facebook-f"></i></a>
 <a class="e-btn inst-gradient"><i class="fab fa-instagram"></i></a>
 <a class="e-btn sky"><i class="fab fa-twitter"></i></a>
 <a class="e-btn success"><i class="fab fa-whatsapp"></i></a>
 <a class="e-btn danger"><i class="fab fa-youtube"></i></a>
 <a class="e-btn dark"><i class="fab fa-github"></i></a>
 <a class="e-btn danger"><i class="fab fa-google"></i></a>
 <a class="e-btn anime success"><i class="fab fa-spotify"></i></a>
 <a class="e-btn anime danger"><i class="fab fa-pinterest-p"></i></a>
 <a class="e-btn anime primary"><i class="fab fa-linkedin-in"></i></a>
 <a class="e-btn anime warning text-white"><i class="fab fa-stack-overflow"></i></a>
 <a class="e-btn anime success"><i class="fab fa-slack-hash"></i></a>
 <a class="e-btn anime sky"><i class="fab fa-dropbox"></i></a>
 <a class="e-btn anime purple"><i class="fab fa-twitch"></i></a>
 <a class="e-btn white"><i class="fab fa-spotify text-success"></i></a>
 <a class="e-btn white"><i class="fab fa-pinterest-p text-danger"></i></a>
 <a class="e-btn white"><i class="fab fa-linkedin-in text-primary"></i></a>
 <a class="e-btn white"><i class="fab fa-stack-overflow text-warning"></i></a>
 <a class="e-btn white"><i class="fab fa-slack-hash text-success"></i></a>
 <a class="e-btn white"><i class="fab fa-dropbox text-sky"></i></a>
 <a class="e-btn white"><i class="fab fa-twitch text-purple"></i></a>
 
Contribute on GitHub
Become a sponsor.

If you are using our framework in a product that generates income, you can also help its maintenance if you wish, if you frequently help in your company or personal developments consider making a recurring donation.

If you want to see your company's logo on this site it's time to be a serious Sponsor.

eFrolic | framework css 2018
eFrolic | framework css 2018

One-time donation


Donate
eFrolic | framework css 2018
eFrolic | framework css 2018

Serious sponsor


Become a Patron