Open In App

How to create a Share Button with different Social Handles using HTML & CSS ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will learn step-by-step instructions to create a share button with multiple social media options such as Facebook, Twitter, LinkedIn, and many more. By the end of this article, you will have the necessary skills to create your custom share button. Sharing your content on social media platforms is now made easy with this feature.

Approach:

  • Create a checkbox and label for the share button. Inside the label, include a `<span>` with the initial share icon.
  • Style the button, icons, and their positions using CSS, with absolute positioning for overlaying.
  • Utilize the `:checked` pseudo-class in CSS for styling changes. Slide and change the background color of icons when the checkbox is checked.
  • Apply smooth transitions for a polished appearance. Use transitions for both icon rotation and sliding effects.
  • Optionally, use JavaScript to toggle the checkbox state and dynamically update the share button icon.
  • Add hover effects on icons for visual feedback. Change background and text colors on hover for a user-friendly experience.

Example: In this example we will create a share button with different social handles using HTML and CSS .

Javascript




// Selecting the html class and 
// convert it to an object
 
const sharebtn =
    document.querySelector('.sharebtn')
 
// Creating a bool variable for changing
// the image of share button
let bool = 0
 
// Adding an event listener
sharebtn.addEventListener('click', () => {
 
    // As we clicked the mouse over
    // the share button the bool value.
    //  get flipped and then working of
    // if-else loop get starts
    bool = !bool
     
    if (bool == 0) {
        sharebtn.innerHTML =
            '<i class="far fa-share-square"></i>'
    } else {
        sharebtn.innerHTML =
            '<i class="fas fa-times"></i>'
    }
})


HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
 
    <script src=
            crossorigin="anonymous">
    </script>
 
    <script src="index.js"></script>
</head>
 
<body>
    <div class="main_box">
        <input type="checkbox" id="share_button">
        <label for="share_button">
            <span class="sharebtn">
                <i class="far fa-share-square"></i>
            </span>
        </label>
 
        <div class="sm_list">
            <a href="#" class="facebook">
                <i class="fab fa-facebook-f"></i>
            </a>
            <a href="#" class="instagram">
                <i class="fab fa-instagram"></i>
            </a>
            <a href="#" class="linkedin">
                <i class="fab fa-linkedin-in"></i>
            </a>
            <a href="#" class="discord">
                <i class="fab fa-discord"></i>
            </a>
            <a href="#" class="whatsapp">
                <i class="fab fa-whatsapp"></i>
            </a>
            <a href="#" class="slack">
                <i class="fab fa-slack"></i>
            </a>
        </div>
    </div>
</body>
</html>


CSS




/* Restoring browsering effects */
*{
    margin:0;
    padding: 0;
    box-sizing: border-box;
}
 
body{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
}
 
.main_box{
    width: 4em;
    height: 4em;
    position: relative;
}
 
#share_button{
    display: none;
}
 
span,a{
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}
 
span{
    width: 4em;
    height: 4em;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: #eee;
    color: #333;
    font-size: 2em;
    z-index: 1;
    cursor: pointer;
    /* border-radius: 30%; */
}
 
.sm_list{
    width: 4em;
    height: 4em;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
 
.sm_list a{
    width: 4em;
    height: 4em;
    border-radius: 50%;
    text-decoration: none;
    color: #fff;
    transition: all .3s;
    font-size: 1.5em;
}
 
#share_button:checked ~ .sm_list a:nth-child(1){
    background-color: #3B5998;
    transition-delay: 0.2s;
    transform: translateX(-6em);
}
 
#share_button:checked ~ .sm_list a:nth-child(2){
    background-color: #dd2553;
    transition-delay: 0.2s;
    transform: translateX(6em);
}
 
#share_button:checked ~ .sm_list a:nth-child(3){
    background-color: #000f94;
    transition-delay: 0.3s;
    transform: translateX(12em);
}
 
#share_button:checked ~ .sm_list a:nth-child(4){
    background-color: #1077ec;
    transition-delay: 0.3s;
    transform: translateX(-12em);
}
 
#share_button:checked ~ .sm_list a:nth-child(5){
    background-color: rgb(10, 63, 0);
    transition-delay: 0.4s;
    transform: translateX(18em);
}
 
#share_button:checked ~ .sm_list a:nth-child(6){
    background: linear-gradient(70deg,blue,green,red,yellow);
    transition-delay: 0.4s;
    transform: translateX(-18em);
}
 
/* Hovering Effects */
#share_button:checked ~ .sm_list a:nth-child(1):hover{
    background-color: #ffffff;
    color: #3B5998;
    /* transition-delay: 0.2s;
    transform: translateX(-6em); */
}
 
#share_button:checked ~ .sm_list a:nth-child(2):hover{
    color: #dd2553;
    background-color: #fff;
}
 
#share_button:checked ~ .sm_list a:nth-child(3):hover{
    color: #000f94;
    background-color: #fff;
}
 
#share_button:checked ~ .sm_list a:nth-child(4):hover{
    color: #1077ec;
    background-color: #fff;
}
 
#share_button:checked ~ .sm_list a:nth-child(5):hover{
    color: rgb(10, 63, 0);
    background-color: #fff;
}
 
#share_button:checked ~ .sm_list a:nth-child(6):hover{
    color: black;
    background-image: linear-gradient(90deg,white,grey);
}
 
span:visited{
    background-color: #000f94;
}


Output: Click here to see live code output



Last Updated : 30 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads