CSS Social Media Navigation Bar

Open In Editor Publish Your Code

<!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>

CSS Social Media Navigation Bar

Recommended

Geometry Dash Game Clone HTML CSS JavaScript

Firefly Button HTML CSS Tailwind

Responsive CSS Card

HTML

CSS

JS

Recommended

Geometry Dash Game Clone HTML CSS JavaScript

Firefly Button HTML CSS Tailwind

Responsive CSS Card

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS