Build an Animated Circular Social Media Menu with HTML & CSS
Create a modern circular hamburger menu animation using pure HTML & CSS — perfect for portfolios, landing pages, and frontend UI practice.
👋 Yo! I’m Munish — a full stack web dev + AI/ML learner building in public. 💻 On this channel: Beginner-friendly web development tutorials Dev vlogs + learning journey AI/ML experiments coming soon 🎯 Subscribe to grow with me and build cool stuff, one line of code at a time.
#CodeWithMishu | Learn. Build. Dominate.
🌟 Final Output
We’re building this sleek animated UI:
Central hamburger button 🍔
Expanding circular social media icons 🔥
Smooth CSS animations ✨
Pure HTML + CSS (No JavaScript needed)
Perfect beginner frontend project to improve:
CSS transforms
Transitions
Positioning
UI animation skills
📂 Project Structure
project-folder/
│
├── index.html
└── style.css
🧠 How It Works
The menu uses:
A hidden checkbox input
CSS sibling selectors (
~)CSS transforms
Rotation mathematics
Transition animations
When the checkbox gets checked, the icons expand into a circular ring.
Classic frontend wizardry. No frameworks. No overengineering. Just raw CSS power.
📄 HTML Code
Create an index.html file and paste this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Circular Menu</title>
<!-- Font Awesome Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="menu-container">
<!-- Hidden Checkbox -->
<input type="checkbox" id="menu-toggle">
<!-- Main Button -->
<label for="menu-toggle" class="main-btn">
<i class="fas fa-bars"></i>
</label>
<!-- Social Icons -->
<div class="icon-ring">
<a href="#" style="--i:0;"><i class="fab fa-youtube"></i></a>
<a href="#" style="--i:1;"><i class="fab fa-tiktok"></i></a>
<a href="#" style="--i:2;"><i class="fab fa-wordpress"></i></a>
<a href="#" style="--i:3;"><i class="fab fa-twitter"></i></a>
<a href="#" style="--i:4;"><i class="fab fa-facebook"></i></a>
<a href="#" style="--i:5;"><i class="fab fa-instagram"></i></a>
<a href="#" style="--i:6;"><i class="fab fa-github"></i></a>
<a href="#" style="--i:7;"><i class="fas fa-times"></i></a>
</div>
</div>
</body>
</html>
🎨 CSS Code
Now create style.css and paste this:
/* Reset + Center Everything */
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f4f6fc;
font-family: Arial, sans-serif;
}
/* Container */
.menu-container {
position: relative;
width: 250px;
height: 250px;
display: flex;
justify-content: center;
align-items: center;
}
/* Hide Checkbox */
#menu-toggle {
display: none;
}
/* Main Circular Button */
.main-btn {
position: absolute;
width: 60px;
height: 60px;
background-color: white;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5rem;
color: #3cc2d6;
cursor: pointer;
z-index: 10;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
transition: 0.3s ease;
}
/* Change Hamburger to X */
#menu-toggle:checked ~ .main-btn i::before {
content: "\f00d";
}
/* Social Icons */
.icon-ring a {
position: absolute;
top: 50%;
left: 50%;
width: 45px;
height: 45px;
background: white;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2rem;
color: #3cc2d6;
text-decoration: none;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
/* Hidden Initially */
transform: translate(-50%, -50%) scale(0);
opacity: 0;
transition: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Expand into Circle */
#menu-toggle:checked ~ .icon-ring a {
opacity: 1;
transform:
translate(-50%, -50%)
rotate(calc(45deg * var(--i)))
translateY(-90px)
rotate(calc(-45deg * var(--i)))
scale(1);
}
/* Hover Effect */
.icon-ring a:hover {
background: #3cc2d6;
color: white;
}
🔥 Understanding the Animation Logic
This line is the real beast:
rotate(calc(45deg * var(--i)))
translateY(-90px)
rotate(calc(-45deg * var(--i)))
Here’s what happens:
Rotate each icon around the center
Push it outward using
translateYRotate it back so the icon stays upright
That’s how the perfect circular layout happens.
Frontend math finally becoming useful for once 💀
🎯 Skills You Learn from This Project
✅ CSS Transforms
✅ CSS Variables
✅ Flexbox
✅ Circular Positioning
✅ Animation Timing
✅ UI Design Principles
✅ Interactive Components
🚀 Beginner Challenges
Try improving this project yourself:
Add glassmorphism ✨
Add dark mode 🌙
Use gradients 🎨
Add scaling animation
Add tooltip labels
Convert into React component
Make it mobile optimized
That’s how real frontend growth happens: Build → Break → Improve → Repeat.
💡 Final Thoughts
Small UI projects like this are insanely underrated.
Most beginners keep watching tutorials endlessly without actually building anything.
But tiny projects like:
animated menus
buttons
cards
loaders
navigation bars
…are what actually improve frontend skills fast.
Build more.
Copy less.
Experiment more.
That’s the real shortcut.
📢 Want More UI Projects?
If you want more frontend UI animations and mini-projects:
Follow for more 🚀
Save this article ⭐
Share with your developer friends 👨💻
