Social Media Share Buttons with Font Awesome, CSS, and Bootstrap

You can create beautiful social media share buttons using only Font Awesome and pure CSS. This tutorial shows you how to do this.

Final outcome preview:  Final outcome

I created a sample using the Bootstrap starter template. You can see the final outcome which uses Bootstrap 4.3.1jQuery 3.3.1, and Font Awesome 5.8.1 here. Feel free to copy the code and use it on your website.

Below you find the source code.

You can create social sharing buttons in the form of a circle, a square, or a square with rounded borders. Use the following CSS classes for the different options:

  • Circle share button: scl-btn scl-crcl shadow fab fa-facebook-f
  • Square share button: scl-btn shadow fab fa-facebook-f
  • Rounded corners share button: scl-btn scl-rnd shadow fab fa-facebook-f

You can use the shadow class to add a shadow effect.

We created social media buttons for the following websites and platforms:

  • Facebook
  • Twitter
  • Linked In
  • WhatsApp
  • Instagram
  • Youtube
  • Reddit
  • Pinterest
  • SnapChat
  • Skype
  • Google
  • Android
  • Email
  • Git Hub
  • Vimeo
  • Tumblr
  • Vine
  • Foursquare
  • Stumbleupon
  • Flickr
  • Yahoo
  • RSS
  • Medium
  • Blogger
  • PayPal
  • Steam
  • Telegram
  • Xing
  • Yelp
  • Tripadvisor
  • Etsy

Do you want more social buttons? Tell us in the comments what we should add.

<!doctype html>
<html lang="en">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

  <!-- Font Awesome CSS -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

  <title>Social Buttons by SmartLazyCoding.com</title>

  <style type="text/css">
    /* Social Button Stype */
    .scl-btn {
      padding: 15px;
      font-size: 25px;
      width: 55px;
      text-align: center;
      text-decoration: none;
      margin:5px;
      color: white;
    }

    /* Hover Effect */
    .scl-btn:hover {
      opacity: 0.8;
      text-align: center;
      text-decoration: none;
      color: white;
    }

    /* Round buttons */
    .scl-crcl {
      border-radius: 50%;
    }

    /* Round Corners */
    .scl-rnd {
        border-radius:5px;
    }

    /* Brand Colors */
    .fa-facebook-f { background: #3B5998; }
    .fa-twitter { background: #55ACEE; }
    .fa-linkedin-in { background: #007bb5; }
    .fa-whatsapp { background: #25D366; }
    .fa-at, .fa-envelope { background: #ff6600; }
    .fa-google { background: #dd4b39; }
    .fa-youtube { background: #bb0000; }
    .fa-instagram { background: #125688; }
    .fa-pinterest { background: #cb2027; }
    .fa-snapchat-ghost { background: #fffc00; }
    .fa-skype { background: #00aff0; }
    .fa-android { background: #a4c639; }
    .fa-dribbble { background: #ea4c89; }
    .fa-vimeo-v { background: #45bbff; }
    .fa-tumblr { background: #2c4762; }
    .fa-vine { background: #00b489; }
    .fa-foursquare { background: #45bbff; }
    .fa-stumbleupon { background: #eb4924; }
    .fa-flickr { background: #f40083; }
    .fa-yahoo { background: #430297; }
    .fa-reddit-alien { background: #ff5700; }
    .fa-rss { background: #ff6600; }
    .fa-medium-m { background: #000000; }
    .fa-blogger { background: #f57d00; }
    .fa-facebook-messenger { background: #3b5998; }
    .fa-github { background: #000000; }
    .fa-paypal { background: #003087; }
    .fa-steam-symbol { background: #00adee; }
    .fa-telegram-plane { background: #0088cc; }
    .fa-xing { background: #026466; }
    .fa-yelp { background: #af0606; }
    .fa-tripadvisor { background: #00af87; }
    .fa-etsy { background: #d5641c; }
  </style>
</head>
<body>
  <!-- Page Content -->
  <div class="container">
    <div class="row">
      <div class="col-lg-12 text-center">
        <h1 class="mt-3">Social Button Template</h1>
        <p >By <a href="https://smartlazycoding.com">smartlazycoding.com</a></p>
        <ul class="list-unstyled">
          <li>Bootstrap 4.3.1</li>
          <li>jQuery 3.3.1</li>
          <li>Font Awesome 5.8.1</li>
        </ul>
      </div>

      <div class="col-lg-12 text-center">
        <a href="#" class="scl-btn scl-crcl shadow fab fa-facebook-f"></a>
        <a href="#" class="scl-btn scl-crcl shadow fab fa-twitter"></a>
        <a href="#" class="scl-btn scl-crcl shadow fab fa-linkedin-in"></a>
        <a href="#" class="scl-btn scl-crcl shadow fab fa-whatsapp"></a>
        <a href="#" class="scl-btn scl-crcl shadow fab fa-instagram"></a>
        <a href="#" class="scl-btn scl-crcl shadow fab fa-youtube"></a>
        <a href="#" class="scl-btn scl-crcl shadow fab fa-reddit-alien"></a>
        <a href="#" class="scl-btn scl-crcl shadow fab fa-pinterest"></a>
        <a href="#" class="scl-btn scl-crcl shadow fab fa-snapchat-ghost"></a>
        <a href="#" class="scl-btn scl-crcl shadow fab fa-skype"></a>
        <a href="#" class="scl-btn scl-crcl shadow fab fa-google"></a>
        <a href="#" class="scl-btn scl-crcl shadow fab fa-android"></a>
        <a href="#" class="scl-btn scl-crcl shadow fas fa-envelope"></a>
        <a href="#" class="scl-btn scl-crcl shadow fab fa-github"></a>
        <a href="#" class="scl-btn scl-crcl shadow fab fa-vimeo-v"></a>
        <a href="#" class="scl-btn scl-crcl shadow fab fa-tumblr"></a>
        <a href="#" class="scl-btn scl-crcl shadow fab fa-vine"></a>
        <a href="#" class="scl-btn scl-crcl shadow fab fa-foursquare"></a>
        <a href="#" class="scl-btn scl-crcl shadow fab fa-stumbleupon"></a>
        <a href="#" class="scl-btn scl-crcl shadow fab fa-flickr"></a>
        <a href="#" class="scl-btn scl-crcl shadow fab fa-yahoo"></a>
        <a href="#" class="scl-btn scl-crcl shadow fas fa-rss"></a>
        <a href="#" class="scl-btn scl-crcl shadow fab fa-medium-m"></a>
        <a href="#" class="scl-btn scl-crcl shadow fab fa-blogger"></a>
        <a href="#" class="scl-btn scl-crcl shadow fab fa-facebook-messenger"></a>
        <a href="#" class="scl-btn scl-crcl shadow fab fa-paypal"></a>
        <a href="#" class="scl-btn scl-crcl shadow fab fa-steam-symbol"></a>
        <a href="#" class="scl-btn scl-crcl shadow fab fa-telegram-plane"></a>
        <a href="#" class="scl-btn scl-crcl shadow fab fa-xing"></a>
        <a href="#" class="scl-btn scl-crcl shadow fab fa-yelp"></a>
        <a href="#" class="scl-btn scl-crcl shadow fab fa-tripadvisor"></a>
        <a href="#" class="scl-btn scl-crcl shadow fab fa-etsy"></a>
      </div>

      <div class="col-lg-12 text-center mt-3">
        <a href="#" class="scl-btn shadow fab fa-facebook-f"></a>
        <a href="#" class="scl-btn shadow fab fa-twitter"></a>
        <a href="#" class="scl-btn shadow fab fa-linkedin-in"></a>
        <a href="#" class="scl-btn shadow fab fa-whatsapp"></a>
        <a href="#" class="scl-btn shadow fab fa-instagram"></a>
        <a href="#" class="scl-btn shadow fab fa-youtube"></a>
        <a href="#" class="scl-btn shadow fab fa-reddit-alien"></a>
        <a href="#" class="scl-btn shadow fab fa-pinterest"></a>
        <a href="#" class="scl-btn shadow fab fa-snapchat-ghost"></a>
        <a href="#" class="scl-btn shadow fab fa-skype"></a>
        <a href="#" class="scl-btn shadow fab fa-google"></a>
        <a href="#" class="scl-btn shadow fab fa-android"></a>
        <a href="#" class="scl-btn shadow fas fa-envelope"></a>
        <a href="#" class="scl-btn shadow fab fa-github"></a>
        <a href="#" class="scl-btn shadow fab fa-vimeo-v"></a>
        <a href="#" class="scl-btn shadow fab fa-tumblr"></a>
        <a href="#" class="scl-btn shadow fab fa-vine"></a>
        <a href="#" class="scl-btn shadow fab fa-foursquare"></a>
        <a href="#" class="scl-btn shadow fab fa-stumbleupon"></a>
        <a href="#" class="scl-btn shadow fab fa-flickr"></a>
        <a href="#" class="scl-btn shadow fab fa-yahoo"></a>
        <a href="#" class="scl-btn shadow fas fa-rss"></a>
        <a href="#" class="scl-btn shadow fab fa-medium-m"></a>
        <a href="#" class="scl-btn shadow fab fa-blogger"></a>
        <a href="#" class="scl-btn shadow fab fa-facebook-messenger"></a>
        <a href="#" class="scl-btn shadow fab fa-paypal"></a>
        <a href="#" class="scl-btn shadow fab fa-steam-symbol"></a>
        <a href="#" class="scl-btn shadow fab fa-telegram-plane"></a>
        <a href="#" class="scl-btn shadow fab fa-xing"></a>
        <a href="#" class="scl-btn shadow fab fa-yelp"></a>
        <a href="#" class="scl-btn shadow fab fa-tripadvisor"></a>
        <a href="#" class="scl-btn shadow fab fa-etsy"></a>
      </div>

      <div class="col-lg-12 text-center mt-3">
        <a href="#" class="scl-btn scl-rnd shadow fab fa-facebook-f"></a>
        <a href="#" class="scl-btn scl-rnd shadow fab fa-twitter"></a>
        <a href="#" class="scl-btn scl-rnd shadow fab fa-linkedin-in"></a>
        <a href="#" class="scl-btn scl-rnd shadow fab fa-whatsapp"></a>
        <a href="#" class="scl-btn scl-rnd shadow fab fa-instagram"></a>
        <a href="#" class="scl-btn scl-rnd shadow fab fa-youtube"></a>
        <a href="#" class="scl-btn scl-rnd shadow fab fa-reddit-alien"></a>
        <a href="#" class="scl-btn scl-rnd shadow fab fa-pinterest"></a>
        <a href="#" class="scl-btn scl-rnd shadow fab fa-snapchat-ghost"></a>
        <a href="#" class="scl-btn scl-rnd shadow fab fa-skype"></a>
        <a href="#" class="scl-btn scl-rnd shadow fab fa-google"></a>
        <a href="#" class="scl-btn scl-rnd shadow fab fa-android"></a>
        <a href="#" class="scl-btn scl-rnd shadow fas fa-envelope"></a>
        <a href="#" class="scl-btn scl-rnd shadow fab fa-github"></a>
        <a href="#" class="scl-btn scl-rnd shadow fab fa-vimeo-v"></a>
        <a href="#" class="scl-btn scl-rnd shadow fab fa-tumblr"></a>
        <a href="#" class="scl-btn scl-rnd shadow fab fa-vine"></a>
        <a href="#" class="scl-btn scl-rnd shadow fab fa-foursquare"></a>
        <a href="#" class="scl-btn scl-rnd shadow fab fa-stumbleupon"></a>
        <a href="#" class="scl-btn scl-rnd shadow fab fa-flickr"></a>
        <a href="#" class="scl-btn scl-rnd shadow fab fa-yahoo"></a>
        <a href="#" class="scl-btn scl-rnd shadow fas fa-rss"></a>
        <a href="#" class="scl-btn scl-rnd shadow fab fa-medium-m"></a>
        <a href="#" class="scl-btn scl-rnd shadow fab fa-blogger"></a>
        <a href="#" class="scl-btn scl-rnd shadow fab fa-facebook-messenger"></a>
        <a href="#" class="scl-btn scl-rnd shadow fab fa-paypal"></a>
        <a href="#" class="scl-btn scl-rnd shadow fab fa-steam-symbol"></a>
        <a href="#" class="scl-btn scl-rnd shadow fab fa-telegram-plane"></a>
        <a href="#" class="scl-btn scl-rnd shadow fab fa-xing"></a>
        <a href="#" class="scl-btn scl-rnd shadow fab fa-yelp"></a>
        <a href="#" class="scl-btn scl-rnd shadow fab fa-tripadvisor"></a>
        <a href="#" class="scl-btn scl-rnd shadow fab fa-etsy"></a>
      </div>
    </div>
  </div>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>