-
Curved Bottom Navigation Bar
HTML
CSS
JavaScript
<div class="nav"> <a href="#">🏠</a> <a href="#">🔍</a> <a href="#">➕</a> <a href="#">❤️</a> <a href="#">👤</a> </div>
body { margin: 0; background: #e9e9e9; height: 100vh; display: flex; justify-content: center; align-items: flex-end; } .nav { position: relative; width: 90%; height: 70px; background: #6870e8; border-radius: 40px 40px 0 0; display: flex; justify-content: space-around; align-items: center; } .nav a { color: #fff; text-decoration: none; text-align: center; font-size: 20px; }
Live Preview
- Curved Bottom Navigation Bar