Barra de navegación de redes sociales CSS

Abrir en el editor Publica tu código

Recomendado

9 March 2023

Formulario de registro Bootstrap responsivo

16 July 2023

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

Formulario de registro Bootstrap responsivo

Iconos sociales con HTML

Ondas con CSS puro

HTML

CSS

JS

Recomendado

Formulario de registro Bootstrap responsivo

Iconos sociales con HTML

Ondas con CSS puro

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS