Skip to content
Related Articles

Related Articles

Improve Article

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

  • Last Updated : 22 Feb, 2021

In this article, we are going to create a share button which shows the social media accounts to share specific content over it when we click on the button.

Approach:

  • Create an HTML file in which we are going to add different types of social media icons.
  • Create a CSS style to give some animation effects to the web-page elements.
  • Create a JS file for adding event-listeners that can detect the mouse click event.

HTML Code:

  1. First, create a HTML file(index.html).
  2. Then we link the CSS file that provides all the animation’s effect to our HTML. This is also placed in between the <head> tag.
  3. Coming to the body section of our HTML code.
    1. We have to add different social media icons.
    2. At the end of the body tag, we have to add 2 <script> tags one for our index.js file and the other for the icon that we have used on our web-page.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <link rel="stylesheet" href="style.css">
  
        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 Code: CSS is used to give different types of animations and effects to our HTML page so that it looks interactive to all users.



In CSS we have to remind the following points –

  • Restore all the browser effects.
  • Use classes and ids to give effects to HTML elements.
  • Use of :hover to use hover effects

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;
}

JavaScript Code:

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 
var 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>'
    }
})

Steps to Run the Code:

1. Our project structure looks like this


2. Open index.html file to start the project

Output: 

In this way, you can create your own share buttons by changing the social handles and the styling effects.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :