Create Share Button with Different Social Handles Using HTML and CSS

To create share button with different social handles using HTML and CSS, we will be using basic CSS properties and HTML tags. In this article, we will be understanding stepwise process to create share button with different social handles.

In this article, we are having six HTML buttons and our task is to create share button with different social handles using HTML and CSS. We will be creating share buttons of Facebook, Twitter, Reddit, Pinterest, Linkedin and Whatsapp

Steps to Create Share Button With Different Social Handles

To create share button with different social handles using HTML and CSS, we will be following below mentioned steps with stepwise explaination and example code.

Creating Share Buttons Using HTML

We have implemented following steps to create share buttons using HTML:

  • We have used a div container to group all the share buttons together.
  • We have used HTML button tag to create six share buttons with class name as buttons and respective social handle names.
  • Each button includes an <i> element with a class name fab representing a Font Awesome icon and a specific icon name such as fa-facebook-f.
  • In head section of HTML, we have used script tag which loads Font Awesome icons library. 
<!DOCTYPE html>
<html>
<head>
    <script src="https://kit.fontawesome.com/704ff50790.js" 
            crossorigin="anonymous"></script>
</head>
<body>
    <h3>
        Creating a Share Button with different 
        Social Handles using HTML and CSS
    </h3>
    <p>
        This example creates a share button with 
        different social handles using HTML and 
        CSS which shares current page address.
    </p>
    <div class="container">
        <button class="buttons facebook">
            <i class="fab fa-facebook-f"></i>
        </button>
        <button class="buttons twitter">
            <i class="fab fa-twitter"></i>
        </button>
        <button class="buttons linkedin">
            <i class="fab fa-linkedin-in"></i>
        </button>
        <button class="buttons pinterest">
            <i class="fab fa-pinterest"></i>
        </button>
        <button class="buttons reddit">
            <i class="fab fa-reddit-alien"></i>
        </button>
        <button class="buttons whatsapp">
            <i class="fab fa-whatsapp"></i>
        </button>
    </div>
</body>
</html>

Designing Share Buttons Using CSS

We have implemented following steps to design share buttons using CSS:

  • We have used container class that applies flex using CSS display property, CSS gap property and margin-top property to arrange the buttons horizontally with a gap of 10 pixels between them with 2% of top margin.
  • Then we have used buttons class to apply common styles to all buttons such as border, border-radius for curved border, color for logo color, cursor to change the cursor to pointer, font-size to set the size of logo and padding.
  • Then we have used social handles names as class names to define specific background-color and border for each button corresponding to the respective social media platform.
  • Then we have used hover psuedo class to define specific background-color and logo color upon hovering over it.
.container {
    display: flex;
    gap: 10px;
    margin-top: 2%;
}
.buttons {
    border: none;
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
    font-size: 24px;
    padding: 16px 24px;
}
.facebook {
    background-color: #3b5998;
    border: 1px solid #3b5998;
}
.facebook:hover {
    background-color: white;
    color: #3b5998;
}
.twitter {
    background-color: #1da1f2;
    border: 1px solid #1da1f2;
}
.twitter:hover {
    background-color: white;
    color: #1da1f2;
}
.linkedin {
    background-color: #0077b5;
    border: 1px solid #0077b5;
}
.linkedin:hover {
    background-color: white;
    color: #0077b5;
}
.pinterest {
    background-color: #bd081c;
    border: 1px solid #bd081c;
}
.pinterest:hover {
    background-color: white;
    color: #bd081c;
}
.reddit {
    background-color: #ff4500;
    border: 1px solid #ff4500;
}
.reddit:hover {
    background-color: white;
    color: #ff4500;
}
.whatsapp {
    background-color: #25d366;
    border: 1px solid #25d366;
}
.whatsapp:hover {
    background-color: white;
    color: #25d366;
}

Complete Example Code

Here is the complete example code implementing above mentioned steps to create share button with different social handles using HTML and CSS.

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            display: flex;
            gap: 10px;
            margin-top: 2%;
        }
        .buttons {
            border: none;
            border-radius: 10px;
            color: #fff;
            cursor: pointer;
            font-size: 24px;
            padding: 16px 24px;
        }
        .facebook {
            background-color: #3b5998;
            border: 1px solid #3b5998;
        }
        .facebook:hover {
            background-color: white;
            color: #3b5998;
        }
        .twitter {
            background-color: #1da1f2;
            border: 1px solid #1da1f2;
        }
        .twitter:hover {
            background-color: white;
            color: #1da1f2;
        }
        .linkedin {
            background-color: #0077b5;
            border: 1px solid #0077b5;
        }
        .linkedin:hover {
            background-color: white;
            color: #0077b5;
        }
        .pinterest {
            background-color: #bd081c;
            border: 1px solid #bd081c;
        }
        .pinterest:hover {
            background-color: white;
            color: #bd081c;
        }
        .reddit {
            background-color: #ff4500;
            border: 1px solid #ff4500;
        }
        .reddit:hover {
            background-color: white;
            color: #ff4500;
        }
        .whatsapp {
            background-color: #25d366;
            border: 1px solid #25d366;
        }
        .whatsapp:hover {
            background-color: white;
            color: #25d366;
        }
    </style>
    <script src="https://kit.fontawesome.com/704ff50790.js" 
            crossorigin="anonymous"></script>
</head>
<body>
    <h3>
        Creating a Share Button with different 
        Social Handles using HTML and CSS
    </h3>
    <p>
        This example creates a share button with 
        different social handles using HTML and 
        CSS which shares current page address.
    </p>
    <div class="container">
        <button class="buttons facebook">
            <i class="fab fa-facebook-f"></i>
        </button>
        <button class="buttons twitter">
            <i class="fab fa-twitter"></i>
        </button>
        <button class="buttons linkedin">
            <i class="fab fa-linkedin-in"></i>
        </button>
        <button class="buttons pinterest">
            <i class="fab fa-pinterest"></i>
        </button>
        <button class="buttons reddit">
            <i class="fab fa-reddit-alien"></i>
        </button>
        <button class="buttons whatsapp">
            <i class="fab fa-whatsapp"></i>
        </button>
    </div>
</body>
</html>

Conclusion

In this article, to create share button with different social handles using HTML and CSS, we have used basic CSS properties like border, background-color and so on and Font Awesome icon for buttons for social handles.

Updated on: 2024-09-19T13:16:45+05:30

10K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements