Barre de navigation CSS pour les réseaux sociaux

74 mambetovbekzat39

Ouvrir dans l'éditeur Publiez votre code

Barre de navigation CSS pour les réseaux sociaux

Recommandé

27 December 2024

Un code par efficientfunction480

21 August 2024

Page de chargement animée

12 September 2025

Curseur d'images HTML CSS JavaScript

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>

Recommandé

Un code par efficientfunction480

Page de chargement animée

Curseur d'images HTML CSS JavaScript

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS