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

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:
First, create a HTML file(index.html).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.Coming to the body section of our HTML code.We have to add different social media icons.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.
First, create a HTML file(index.html).
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.
Coming to the body section of our HTML code.We have to add different social media icons.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.
We have to add different social media icons.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.
We have to add different social media icons.
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">      <script src="https://kit.fontawesome.com/704ff50790.js"         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 listenersharebtn.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.
CSS-Questions
HTML-Questions
JavaScript-Questions
Technical Scripter 2020
CSS
HTML
JavaScript
Technical Scripter
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to set space between the flexbox ?
Design a web page using HTML and CSS
Form validation using jQuery
How to style a checkbox using CSS?
Search Bar using HTML, CSS and JavaScript
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
How to set input type date in dd-mm-yyyy format using HTML ?
REST API (Introduction)
HTML Cheat Sheet - A Basic Guide to HTML