CSS सोशल मीडिया नेविगेशन बार

767 mambetovv

संपादक में खोलें Video अपना कोड प्रकाशित करें

अनुशंसित

20 April 2024

HTML और CSS का उपयोग करके सोशल आइकन

12 October 2025

CSS लोडिंग एनीमेशन HTML संरचना

12 August 2025

CSS हार्ट एनीमेशन कोड स्निपेट

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Social Nav</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  font-family: 'Poppins', sans-serif;
  background: linear-gradient(135deg, #8a2be2, #6a0dad);
  padding: 20px;
}

.nav-bar {
  display: flex;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.2);
  max-width: 600px;
  width: 100%;
}

.nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 15px 10px;
  color: #e0d6f0;
  text-decoration: none;
  border-radius: 15px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.nav i {
  font-size: 1.5rem;
  margin-bottom: 8px;
  transition: all 0.3s ease;
}

.nav span {
  font-size: 0.85rem;
  font-weight: 500;
  transition: all 0.3s ease;
}

.nav::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.nav:hover::before {
  left: 100%;
}

.nav:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-5px);
  color: white;
}

.nav:hover i {
  transform: scale(1.2);
}

.active {
  background: rgba(255, 255, 255, 0.2);
  color: #73ffe8;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.active i {
  transform: scale(1.2);
  color: #73ffe8;
}

/* Индивидуальные цвета для каждой платформы */
.tiktok:hover {
  background: rgba(0, 0, 0, 0.2);
  color: #69C9D0;
}

.instagram:hover {
  background: rgba(0, 0, 0, 0.2);
  color: #E1306C;
}

.telegram:hover {
  background: rgba(0, 0, 0, 0.2);
  color: #0088cc;
}

/* Адаптивность */
@media (max-width: 480px) {
  .nav-bar {
    flex-direction: column;
    max-width: 200px;
  }
  
  .nav {
    flex-direction: row;
    justify-content: flex-start;
    padding: 12px 15px;
  }
  
  .nav i {
    margin-bottom: 0;
    margin-right: 10px;
    font-size: 1.3rem;
  }
  
  .nav span {
    font-size: 0.9rem;
  }
}
</style>
</head>
<body>
<div class="nav-bar" id="navbar">
  <a href="https://www.tiktok.com/@gym_mambetovv" class="nav tiktok" target="_blank">
    <i class="fab fa-tiktok"></i> TikTok
</a>

<a href="https://www.instagram.com/webstore_com" class="nav instagram" target="_blank">
    <i class="fab fa-instagram"></i> Instagram
</a>

<a href="https://t.me/StackMambetovv" class="nav telegram" target="_blank">
    <i class="fab fa-telegram"></i> Telegram
</a>

</div>

अनुशंसित

HTML और CSS का उपयोग करके सोशल आइकन

CSS लोडिंग एनीमेशन HTML संरचना

CSS हार्ट एनीमेशन कोड स्निपेट

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS