How to Create Social Share Buttons Using HTML and CSS

Hi Guys, I am back with another fantastic project in this project I used HTML and CSS. This project is a Social Share Button using HTML and CSS only.

NOTE: To stay informed about my exciting new projects, join our WhatsApp and Telegram community and be part of the conversation.”

Join Our WhatsApp Community

Join Our Telegram Channel

I also share a complete source code with my readers and followers it is free of cost, not any subscription to get the source code of this project. You can download these code files and use them as you want for free.

Recently I created a Dark and Light mode effect using HTML, CSS, and some JavaScript if you want to create please check this.

Social Share Button

A social share button is a feature on websites and applications that allows users to share content with their social media networks easily. It typically appears as an icon or button associated with popular social media platforms like Facebook, Twitter, LinkedIn, Pinterest, or Instagram.

When clicked, the button triggers a share dialog or pop-up window that enables users to share the webpage or specific content item, such as an article, image, or video, on their social media profiles or with selected contacts.

The purpose of a social share button is to encourage and simplify the process of sharing content, thereby increasing its visibility and reach among a wider audience.

By integrating these buttons into websites and applications, content creators and businesses can leverage the power of social media to amplify their message and attract more visitors or customers.

Social share buttons have become an essential component of online marketing and content promotion strategies, as they enable users to distribute content across various social media platforms with just a few clicks.

About This Project

The Coding Pakistan blog website embarked on this project with a noble aim: to provide cost-free assistance to students who are delving into the realm of programming languages and learning the ropes of web development technologies.

This initiative encompasses a wide range of valuable resources, covering essential languages such as HTML, CSS, JavaScript, and advanced frameworks like React.js and Next.js.

Created by	Coding Pakistan
Languages	HTML / CSS
Source Code	GitHub
Preview	Take Preview

How To Create a Social Share Button HTML and CSS

There are some steps to create this type of Social Media Share Button using HTML and CSS that are given below.

The first step is to create one folder.
Open this folder in Vs Code Editor and create two files HTML and CSS.

Make sure the HTML file extension is (.html), the CSS file extension will be (.css) and the JavaScript file extension is (.js)
After creating files, you link a CSS file with an HTML file with the help of this line code. (<link rel=”stylesheet” href=”style.css”>)
The last step is copying and pasting the given code into your files.

Social Share Button – Source Code

HTML FILE

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Created by www.codingpakistan.com -->
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
      integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
    <title>Share Button</title>
  </head>
  <body>
    <button class="button">
      <span class="button-text">
        <span> Share </span>
        <i class="fa-solid fa-share-nodes"></i>
      </span>
      <span class="button-links">
        <a>
          <i class="fa-brands fa-twitter"></i>
        </a>
        <a>
          <i class="fa-brands fa-facebook"></i>
        </a>
        <a>
          <i class="fa-brands fa-linkedin"></i>
        </a>
      </span>
    </button>
  </body>
</html>

CSS FILE

html,
body {
  height: 100%;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  display: grid;
  place-items: center;
  background: #f8faff;
}

.button {
  position: relative;
  overflow: hidden;
  width: 140px;
  height: 50px;
  border-radius: 25px;
  border: 0;
  color: #f7f7f7;
  background: #275efe;
  font-family: "Euclid Circular A", "Poppins";
  cursor: pointer;
  transition: 0.2s;
}

.button i {
  font-size: 18px;
}

.button-text,
.button-links {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  transition: 0.3s;
}

.button-text {
  gap: 10px;
  justify-content: center;
  color: inherit;
  font-size: 16px;
}

.button-links {
  opacity: 0;
  justify-content: space-between;
  padding: 0 28px;
  transition: 0.2s;
}

.button-links a {
  translate: 0 50px;
  transition: 0.3s;
}

.button:hover {
  border-radius: 6px;
}

.button:hover .button-links a:nth-child(1) {
  transition-delay: 0.05s;
}

.button:hover .button-links a:nth-child(2) {
  transition-delay: 0.1s;
}

.button:hover .button-links a:nth-child(3) {
  transition-delay: 0.15s;
}

.button:hover .button-text {
  translate: 0 -100%;
}

.button:hover .button-links {
  opacity: 1;
}

.button:hover .button-links a {
  translate: 0;
}

.button-links i {
  color: #f7f7f7;
}