Barra de navegación de redes sociales CSS

Abrir en el editor Publica tu código

Recomendado

15 October 2024

Un código de sheeshokaokayokay

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>

Barra de navegación de redes sociales CSS

Recomendado

Acerca de la página

Un código de Mete

Un código de sheeshokaokayokay

HTML

CSS

JS

Recomendado

Acerca de la página

Un código de Mete

Un código de sheeshokaokayokay

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS