In this tutorial, we’ll create a modern animated social media share menu that expands from a central button. When the user clicks the plus button, social icons smoothly spread out in a circular layout with hover tilt effects and colorful backgrounds. This type of social share widget is perfect for blogs, portfolios or interactive websites that want to add a creative sharing option.
HTML Structure for Social Media Share Menu
We’ll start by defining the HTML structure.
<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>The markup contains a main container, a wrapper and an unordered list (ul) that holds each social media icon inside list items (li). Each item contains:
- A Bootstrap Icon (for the social platform logo).
- A background span with custom colors.
- A hidden text label that appears on hover.
At the center, a plus button is placed to toggle the menu open and closed.
This HTML setup ensures that every social icon is accessible, styled and ready for animations.
Styling the Social Media Share Menu with CSS
The CSS does most of the heavy lifting. We use Flexbox for centering and absolute positioning to arrange the icons in a circular shape.
@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);
}Key styling features include:
- Circular Expansion: Each
limoves outward on toggle using CSS transforms with custom--xand--yvalues. - Hover Tilt Effects: Right and left tilt classes apply subtle rotations when hovered.
- Colorful Backgrounds: Each icon has a unique gradient or solid background matching its brand (Instagram gradient, WhatsApp green, Facebook blue, etc.).
- Label Animations: Text labels slide in when hovering over an icon, appearing either to the right or left.
- Plus Button Rotation: The central button rotates into a close icon when activated.
This combination creates a lively, interactive feel that enhances user engagement.
Adding JavaScript for Interactivity
The JavaScript is minimal but crucial. Here’s the JavaScript code:
document.querySelector('.share-btn').addEventListener('click', () => {
document.querySelector('body').classList.toggle('show-icons');
})- We add an event listener to the share button. When clicked, it toggles a CSS class (
show-icons) on the body. - This class triggers all the icons to expand outward from the center with staggered transition delays, giving the animation a natural, fluid look. Clicking again retracts them back into the center.
- This toggle effect makes the menu compact by default while still giving users easy access to multiple platforms when needed.
This animated circular social media share menu built with HTML, CSS and JavaScript is a creative way to add interactive sharing options to your website. The combination of circular expansion, colorful hover effects and a minimal toggle button makes it both functional and visually appealing.
You can easily customize it by:
- Adding more social icons.
- Adjusting the expansion radius.
- Changing brand colors or hover effects.
It’s lightweight, responsive and enhances user experience without relying on external plugins. Try this circular social media share menu now.
