Professional Icon Bar

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Professional Icon Bar</title>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
 <style>
 body {
 font-family: 'Arial', sans-serif;
 background-color: #f0f2f5;
 margin: 0;
 display: flex;
 justify-content: center;
 align-items: center;
 height: 100vh;
 }
 .iconbar {
 display: flex;
 justify-content: space-around;
 align-items: center;
 width: 50%;
 background: #fff;
 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
 border-radius: 50px;
 padding: 10px 20px;
 position: relative;
 overflow: hidden;
 }
 .iconbar::before {
 content: '';
 position: absolute;
 top: 50%;
 left: 50%;
 width: 400%;
 height: 400%;
 background: linear-gradient(45deg, #ff6b6b, #ffcc5c, #48c6ef, #6bffb5);
 background-size: 400% 400%;
 animation: gradientAnimation 15s ease infinite;
 z-index: -1;
 filter: blur(100px);
 transition: opacity 0.3s ease;
 opacity: 0.5;
 }
 @keyframes gradientAnimation {
 0% { background-position: 0% 50%; }
 50% { background-position: 100% 50%; }
 100% { background-position: 0% 50%; }
 }
 .iconbar:hover::before {
 opacity: 0.7;
 }
 .iconbar a {
 text-decoration: none;
 color: #333;
 font-size: 1.5rem;
 transition: all 0.3s ease;
 position: relative;
 }
 .iconbar a:hover {
 color: #ff6b6b;
 transform: translateY(-10px);
 }
 .iconbar a:hover .tooltip {
 opacity: 1;
 transform: translateY(-100%);
 }
 .iconbar i {
 margin-bottom: 5px;
 }
 .tooltip {
 position: absolute;
 bottom: 50px;
 left: 50%;
 transform: translateX(-50%);
 background: #333;
 color: #fff;
 padding: 5px 10px;
 border-radius: 5px;
 opacity: 0;
 transform: translateY(-80%);
 transition: all 0.3s ease;
 white-space: nowrap;
 }
 </style>
</head>
<body>
 <div class="iconbar">
 <a href="#" class="icon">
 
 Home
 </a>
 <a href="#" class="icon">
 
 Search
 </a>
 <a href="#" class="icon">
 
 Notifications
 </a>
 <a href="#" class="icon">
 
 Messages
 </a>
 <a href="#" class="icon">
 
 Profile
 </a>
 </div>
</body>
</html>

Professional Icon Bar - MeggiTools