Social Media Share Buttons Display

INFORMATION & CODE

Social Media Share Button Display

What the Code Does

This code is a front-end web component designed to display a neat, interactive row of social media sharing buttons complete with hover effects and informational tooltips. It visually mimics a "Share this article" widget, featuring recognizable brand icons for platforms like Twitter, Facebook, Pinterest, Snapchat, and LinkedIn.

How the code Works

The HTML structure establishes a central container holding multiple button elements. Each button encloses a FontAwesome icon (.fab) representing a specific social network and a hidden text span (.tooltiptext) that serves as the tooltip description. The CSS file styles these elements by centering the container on the page, transforming the buttons into rounded, clickable targets, and applying smooth visual transitions. When a user hovers over a button, the CSS triggers a drop-shadow effect and makes the corresponding tooltip fade smoothly into view using opacity and visibility properties, complete with a small pointing speech-bubble arrow generated via pseudo-elements (::after).

How to Use the Code

To use this code in a web project, save the HTML code into a file named index.html and the CSS code into a file named styles.css within the same directory. Because the code relies on FontAwesome for the icons, ensure your project has internet access so it can load the external stylesheet linked via the FontKit script in the HTML <head>. You can then embed this widget into any webpage to give users a stylized, interactive interface for sharing content. (Note: While the buttons look and feel interactive, JavaScript functionality such as actual URL sharing logic—would need to be added separately to make the buttons execute sharing actions upon being clicked).

HTML


                <!doctype html>
<html lang="en/us">
  <head>
    <meta charset="utf-8">
    <title>Share this article</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://kit.fontawesome.com/9c37986c06.js" crossorigin="anonymous"></script>
  </head>
  <body>
    <div class="share-box">
      <button class="share-btn" id="0">
        <div class="tooltip"><i class="fab fa-twitter"></i>
          <span class="tooltiptext">Share on Twitter</span>
        </div>
      </button>
      <button class="share-btn" id="1">
        <div class="tooltip"><i class="fab fa-facebook"></i>
          <span class="tooltiptext">Share on Facebook</span>
        </div>
      </button>
      <button class="share-btn" id="2">
        <div class="tooltip"><i class="fab fa-pinterest"></i>
          <span class="tooltiptext">Share on Pintrest</span>
        </div>
      </button>
      <button class="share-btn" id="3">
        <div class="tooltip"><i class="fab fa-snapchat"></i>
          <span class="tooltiptext">Tell on Snapchat</span>
        </div>
      </button>
      <button class="share-btn" id="4">
        <div class="tooltip"><i class="fab fa-linkedin"></i>
          <span class="tooltiptext">Share on Linked In</span>
        </div>
      </button>
    </div>
  </body>
</html>

CSS


                      * {
        box-sizing: border-box;
      }
      body {
        width: 100%;
        height: 100vh;
        padding: 10px;
        margin: 0px;
      }
      .share-box {
        display: block;
        width: 370px;
        margin: 30px auto 10px auto;
      }
      .share-btn {
        width: 50px;
        height: 50px;
        padding: 8px 7.5px;
        margin: 10px;
        background-color: transparent;
        border: 0;
        border-radius: 50%;
        transition-duration: 0.2s;
      }
      .share-btn:hover {
        box-shadow: 0 5px 5px #aaaaaa, 0 0 2px #aaaaaa;
      }
      .share-btn:active {
        box-shadow: 0 0 1px #000000;
        transform: translatey(+4px);
      }
      .fab {
        color: #0033ff;
        font-size: 36px;
		  text-shadow: 2px 2px #cccccc;
      }
      .tooltip {
        position: relative;
        display: block;
      }

      .tooltip .tooltiptext {
        visibility: hidden;
        width: 180px;
        background-color: #0000cc;
        color: #fff;
        font-family: "Courier New", monospace;
        font-weight: bold;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        position: absolute;
        z-index: 1;
        bottom: -120%;
        left: 50%;
        margin-left: -90px;
        opacity: 0;
        transition: opacity 0.3s;
      }

      .tooltip .tooltiptext::after {
        content: "";
        position: absolute;
        bottom: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: transparent transparent #0000cc transparent;
      }

      .tooltip:hover .tooltiptext {
        visibility: visible;
        opacity: 1;
      }
      .tooltip:not(.share-btn):active {
        visibility: visible;
      }

MENU