Build an Interactive Social Media Share Button using HTML, CSS and JavaScript
In this tutorial, we will guide you through the process of creating a stylish and interactive social media share button using HTML, CSS and a bit of JavaScript. This button is designed to enhance user engagement on your website by allowing visitors to easily share your content across various social media platforms.
Also Read: Typing Text Effect using HTML CSS and JS | Without any library
HTML Structure
We have structured the HTML to create a foundation for our share button. The HTML consists of a wrapper div containing an unordered list (ul) of list items (li). Each list item represents a social media platform with an anchor tag (a) that wraps around the icon, background and text elements.
<div class="main-container">
<div class="wrapper">
<ul class="iconList">
<li class="right-tilt" style="--x:0; --y:-1; --d:1">
<a href="#">
<span class="bi bi-instagram"></span>
<span class="bg "></span>
<span class="text">Instagram</span>
</a>
</li>
<li class="right-tilt" style="--x:1; --y:-1; --d:2">
<a href="#">
<span class="bi bi-whatsapp"></span>
<span class="bg"></span>
<span class="text">Whatsapp</span>
</a>
</li>
<li class="right-tilt" style="--x:1; --y:0; --d:3">
<a href="#">
<span class="bi bi-telegram"></span>
<span class="bg"></span>
<span class="text">Telegram</span>
</a>
</li>
<li class="right-tilt" style="--x:1; --y:1; --d:4">
<a href="#">
<span class="bi bi-reddit"></span>
<span class="bg"></span>
<span class="text">Reddit</span>
</a>
</li>
<li class="right-tilt" style="--x:0; --y:1; --d:5">
<a href="#">
<span class="bi bi-messenger"></span>
<span class="bg"></span>
<span class="text">Messenger</span>
</a>
</li>
<li class="left-tilt" style="--x:-1; --y:1; --d:6">
<a href="#">
<span class="bi bi-facebook"></span>
<span class="bg"></span>
<span class="text">Facebook</span>
</a>
</li>
<li class="left-tilt" style="--x:-1; --y:0; --d:7">
<a href="#">
<span class="bi bi-pinterest"></span>
<span class="bg"></span>
<span class="text">Pinterest</span>
</a>
</li>
<li class="left-tilt" style="--x:-1; --y:-1; --d:8">
<a href="#">
<span class="bi bi-linkedin"></span>
<span class="bg"></span>
<span class="text">Linkedin</span>
</a>
</li>
</ul>
<button class="share-btn bi bi-plus"></button>
</div>
</div>
Within each list item, there is an anchor tag (a) that contains three main components:
- An icon span that uses Bootstrap icons to visually represent each social media platform.
- A background span that provides the visual background for the button.
- A text span that displays the name of the social media platform.
Additionally, there's a button with the class "share-btn" which, when clicked, will reveal the social media buttons for sharing. This HTML structure sets up the necessary elements for styling and interactivity, ensuring that the share buttons are both functional and visually appealing.
CSS Styling
The CSS part of our project has been meticulously designed to create an appealing visual experience. We've used CSS variables and flexbox to ensure the elements are properly aligned and responsive.
@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css');
.main-container{
min-height:100vh
}
.main-container,
.wrapper,
.iconList,
a,
.bi {
display: flex;
align-items: center;
justify-content: center;
}
.wrapper {
width: 250px;
height: 250px;
position: relative;
}
.iconList {
position: relative;
width: 100%;
height: 100%;
border-radius: 50%;
}
.iconList li {
width: 40px;
height: 40px;
list-style: none;
position: absolute;
pointer-events: none;
transition: .3s calc(var(--d)*0.08s);
}
.iconList li.right-tilt:hover .bg {
transform: rotate(25deg);
}
.iconList li.left-tilt:hover .bg {
transform: rotate(-25deg);
}
.show-icons li {
pointer-events: auto;
}
.show-icons li:nth-child(even) {
transform: translate(calc(var(--x)*70px), calc(var(--y)*70px));
}
.show-icons li:nth-child(odd) {
transform: translate(calc(var(--x)*100px), calc(var(--y)*100px));
}
.iconList li:hover .bi {
background: rgba(255, 255, 255, 0.074);
}
.iconList a {
color: white;
text-decoration: none;
border-radius: 10px;
width: 100%;
height: 100%;
}
.iconList .bi {
width: 100%;
height: 100%;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.125);
}
.bi-instagram~.bg {
background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}
.bi-linkedin~.bg {
background: rgb(1, 80, 123);
}
.bi-whatsapp~.bg {
background: #15a54a;
}
.bi-pinterest~.bg {
background: #E60023;
}
.bi-facebook~.bg {
background: #215eae;
}
.bi-reddit~.bg {
background: #FF4500;
}
.bi-messenger~.bg {
background: linear-gradient(45deg, rgb(255, 46, 81), rgb(42, 42, 227));
}
.bi-telegram~.bg {
background: #3390ec;
}
.bg {
position: absolute;
transform-origin: bottom;
width: 100%;
height: 100%;
z-index: -1;
border-radius: 10px;
transition: all .3s;
}
.iconList li .text {
position: absolute;
color: white;
font-family: 'calibri';
width: 0px;
overflow: hidden;
z-index: -1;
transition: 0.3s;
top: 10%;
}
.right-tilt .text {
left: 0;
transform: translateX(15px);
}
.right-tilt:hover .text {
transform: translateX(50px);
padding-left: 10px;
width: 100px;
}
.left-tilt .text {
text-align: right;
right: 0;
transform: translateX(-20px);
}
.left-tilt:hover .text {
transform: translateX(-50px);
padding-right: 10px;
width: 100px;
}
.share-btn {
height: 50px;
width: 50px;
font-size: 40px;
color: white;
cursor: pointer;
position: absolute;
border-radius: 50%;
transition: transform .5s;
border: 1px solid #ffffff26;
background: radial-gradient(#4b4b4b, #000000);
}
.show-icons .share-btn {
transform: rotate(45deg);
}
Each social media button has been styled with unique icons, background colors and animations to make them more interactive.
The left-tilt and right-tilt classes give the buttons a dynamic, tilting effect, enhancing their visual appeal. CSS transitions and transformations have been applied to create smooth animations when the buttons are hovered over.
JavaScript Functionality
JavaScript has added interactive functionality to the share button. When the main share button is clicked, it toggles the visibility of the social media icons, allowing users to select their preferred platform for sharing. The script controls the animation timing and ensures that the buttons appear in a sequential, appealing manner.
document.querySelector('.share-btn').addEventListener('click', () => {
document.querySelector('body').classList.toggle('show-icons');
})
By following this tutorial, you have learned how to create a stylish and interactive social media share button using HTML, CSS and JavaScript.
Also Read: Ultimate Weather Web App using HTML CSS JavaScript | Fully Responsive
This feature not only enhances the visual appeal of your website but also improves user engagement by making it easier for visitors to share your content across different social media platforms. Integrating such dynamic elements into your web design can significantly boost the user experience and drive more traffic to your site.
