# Build an Animated Circular Social Media Menu with HTML & CSS
# 🌟 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
```bash
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:
```html
Circular Menu
```
* * *
# 🎨 CSS Code
Now create `style.css` and paste this:
```css
/* 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:
```css
rotate(calc(45deg * var(--i)))
translateY(-90px)
rotate(calc(-45deg * var(--i)))
```
Here’s what happens:
1. Rotate each icon around the center
2. Push it outward using `translateY`
3. Rotate 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 👨💻
* * *