In this article, we are going to create a share button that 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.
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
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;} |
Javascript
// Selecting the html class and // convert it to an objectconst sharebtn = document.querySelector('.sharebtn')// Creating a bool variable for changing// the image of share button let 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>' }}) |
Output: Click here to see live code output
