CSS Social Media Share Cards

This code snippet helps you to create a social media card. It appears to be like a block of code for a social media sharing feature that can be used on a webpage or application. The code creates a container element with an ID of “app_cover” that holds three clickable social media icons (Facebook, Google Plus, and Twitter), each with a corresponding count of shares and a “share” link. Clicking on any of the social media icons will redirect the user to the YouTube video at the URL provided in the “href” attribute.

Finally, the “target” attribute set to “_blank” means that the video will be opened in a new window or tab.

How to Create CSS Social Media Share Cards

First of all, load the following assets into the head tag of your HTML document.

<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.3.1/css/all.css'>

Create the HTML structure for the social media card as follows:

<div id="app_cover">
  <a href="https://youtu.be/hytAjYGt_wA" target="_blank" class="block">
    <div class="card" id="c_fb">
      <div class="c_brand_logo"><i class="fab fa-facebook-f"></i></div>
      <div class="c_share_count">2.4M</div>
      <div class="c_share_link">share</div>
    </div>
    <div class="c_c_card">
      <div class="card cc_card" id="c_o_fb">
        <div class="c_brand_logo"><i class="fab fa-facebook-f"></i></div>
        <div class="c_share_count">2.4M</div>
        <div class="c_share_link">share</div>
      </div>
    </div>
  </a>
  <a href="https://youtu.be/hytAjYGt_wA" target="_blank" class="block">
    <div class="card" id="c_gl">
      <div class="c_brand_logo"><i class="fab fa-google-plus-g"></i></div>
      <div class="c_share_count">204K</div>
      <div class="c_share_link">share</div>
    </div>
    <div class="c_c_card">
      <div class="card cc_card" id="c_o_gl">
        <div class="c_brand_logo"><i class="fab fa-google-plus-g"></i></div>
        <div class="c_share_count">204K</div>
        <div class="c_share_link">share</div>
      </div>
    </div>
  </a>
  <a href="https://youtu.be/hytAjYGt_wA" target="_blank" class="block">
    <div class="card" id="c_tw">
      <div class="c_brand_logo"><i class="fab fa-twitter"></i></div>
      <div class="c_share_count">1.7M</div>
      <div class="c_share_link">share</div>
    </div>
    <div class="c_c_card">
      <div class="card cc_card" id="c_o_tw">
        <div class="c_brand_logo"><i class="fab fa-twitter"></i></div>
        <div class="c_share_count">1.7M</div>
        <div class="c_share_link">share</div>
      </div>
    </div>
  </a>
</div>

Now, style the social media card using the following CSS styles:

html,
body {
  height: 100%;
}

body {
  margin: 0;
}
.cd__main{
display: block !important;
}

#app_cover {
  position: absolute;
  top: 50px;
  right: 0;
  left: 0;
  width: 460px;
  margin: 0 auto;
}

#app_cover:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}

.block {
  float: left;
  width: 120px;
  display: block;
  position: relative;
  text-decoration: none;
}

.block:nth-child(2) {
  margin: 0 50px;
}

.card {
  width: 120px;
  padding-bottom: 30px;
  background-size: cover;
  box-shadow: 0 10px 20px -5px #b6b6b6;
}

.c_c_card {
  position: absolute;
  top: 0;
  width: 0;
  overflow: hidden;
  transition: 0.4s ease-in-out width;
}

.block:hover .c_c_card {
  width: 100%;
}

#c_fb {
  background-color: #4267b2;
}

#c_fb,
#c_o_fb {
  background-image: url("https://himalayasingh.github.io/social-media-share-cards-1/img/mark.png");
}

.cc_card {
  background-color: #fff;
}

#c_tw {
  background-color: #1da1f2;
}

#c_tw,
#c_o_tw {
  background-image: url("https://himalayasingh.github.io/social-media-share-cards-1/img/jack.png");
}

#c_gl {
  background-color: #d93025;
}

#c_gl,
#c_o_gl {
  background-image: url("https://himalayasingh.github.io/social-media-share-cards-1/img/larry.gif");
}

.c_brand_logo {
  color: #fff;
  font-size: 34px;
  padding: 30px 30px 0 30px;
}

#c_o_fb .c_brand_logo {
  color: #4267b2;
}

#c_o_tw .c_brand_logo {
  color: #1da1f2;
}

#c_o_gl .c_brand_logo {
  color: #d93025;
}

.c_brand_logo i {
  width: 34px;
  height: 34px;
  display: block;
  text-align: center;
  padding: 13px;
  margin: 0 auto;
  border-radius: 50%;
}

#c_fb .c_brand_logo i {
  background-color: rgba(66, 103, 178, 0.79);
}

#c_tw .c_brand_logo i {
  background-color: rgba(29, 161, 242, 0.79);
}

#c_gl .c_brand_logo i {
  background-color: rgba(217, 48, 37, 0.79);
}

.cc_card .c_brand_logo i {
  background-color: rgba(255, 255, 255, 0.79);
}

.c_share_count {
  color: #fff;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-weight: bold;
  font-size: 18px;
  text-align: center;
  margin: 15px 0;
  letter-spacing: 1px;
}

#c_o_fb .c_share_count {
  color: #4267b2;
}

#c_o_tw .c_share_count {
  color: #1da1f2;
}

#c_o_gl .c_share_count {
  color: #d93025;
}

.c_share_link {
  color: #000;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  text-align: center;
  font-weight: bold;
  max-width: 60px;
  font-size: 14px;
  margin: 0 auto;
  text-transform: uppercase;
  padding: 6px;
  background-color: rgba(255, 255, 255, 0.79);
  border-radius: 3px;
}

#c_o_fb .c_share_link {
  color: #4267b2;
  border-bottom-color: #4267b2;
}

#c_o_tw .c_share_link {
  color: #1da1f2;
  border-bottom-color: #1da1f2;
}

#c_o_gl .c_share_link {
  color: #d93025;
  border-bottom-color: #d93025;
}

That’s all! hopefully, you have successfully created CSS social media share cards . If you have any questions or suggestions, feel free to comment below.