social moderno

212 kevekıbhack

Abrir no Editor Publique Seu Código

Recomendado

14 September 2024

Formulário de Login Moderno

25 March 2025

Um código por andrej.social.network

23 November 2024

Botões de mídia social pairando

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Social Media Icons - Webleb</title>
  
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="Animated social media icons with hover effects">
  
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  
  
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
  
  <style>
    /* Base Styles */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Poppins', sans-serif;
    }
    
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    }
    
    /* Social Icons Container */
    .wrapper {
      display: flex;
      list-style: none;
      gap: 25px;
    }
    
    /* Icon Base Styles */
    .icon {
      position: relative;
      background: #fff;
      border-radius: 50%;
      width: 60px;
      height: 60px;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
      cursor: pointer;
      transition: all 0.3s ease;
    }
    
    .icon:hover {
      transform: translateY(-10px);
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    }
    
    .icon span {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
    
    .icon span i {
      font-size: 24px;
      color: #fff;
      transition: all 0.3s ease;
    }
    
    /* Tooltip */
    .icon::before {
      content: attr(data-tooltip);
      position: absolute;
      top: 0;
      font-size: 14px;
      background: #fff;
      color: #000;
      padding: 5px 10px;
      border-radius: 25px;
      box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
      opacity: 0;
      pointer-events: none;
      transition: all 0.3s ease;
    }
    
    .icon:hover::before {
      opacity: 1;
      top: -40px;
    }
    
    /* Individual Icon Colors and Effects */
    .icon.facebook {
      background: #1877f2;
    }
    
    .icon.facebook:hover span {
      background: #1877f2;
    }
    
    .icon.facebook span {
      background: linear-gradient(45deg, #1877f2, #0d5fd3);
    }
    
    .icon.youtube {
      background: #ff0000;
    }
    
    .icon.youtube:hover span {
      background: #ff0000;
    }
    
    .icon.youtube span {
      background: linear-gradient(45deg, #ff0000, #cc0000);
    }
    
    .icon.tiktok {
      background: #000000;
    }
    
    .icon.tiktok:hover span {
      background: #000000;
    }
    
    .icon.tiktok span {
      background: linear-gradient(45deg, #000000, #333333);
    }
    
    .icon.instagram {
      background: #e4405f;
    }
    
    .icon.instagram:hover span {
      background: #e4405f;
    }
    
    .icon.instagram span {
      background: linear-gradient(45deg, #e4405f, #c13584);
    }
    
    /* Animation */
    @keyframes float {
      0%, 100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-15px);
      }
    }
    
    .icon {
      animation: float 3s ease-in-out infinite;
    }
    
    .icon:nth-child(1) {
      animation-delay: 0s;
    }
    
    .icon:nth-child(2) {
      animation-delay: 0.2s;
    }
    
    .icon:nth-child(3) {
      animation-delay: 0.4s;
    }
    
    .icon:nth-child(4) {
      animation-delay: 0.6s;
    }
    
    /* Responsive Design */
    @media (max-width: 600px) {
      .wrapper {
        flex-direction: column;
      }
      
      .icon {
        width: 50px;
        height: 50px;
      }
      
      .icon span i {
        font-size: 20px;
      }
    }
  </style>
</head>
<body>
  <ul class="wrapper">
    <li class="icon facebook" data-tooltip="Facebook">
      <span><i class="fab fa-facebook-f"></i></span>
    </li>
    <li class="icon youtube" data-tooltip="YouTube">
      <span><i class="fab fa-youtube"></i></span>
    </li>
    <li class="icon tiktok" data-tooltip="TikTok">
      <span><i class="fab fa-tiktok"></i></span>
    </li>
    <li class="icon instagram" data-tooltip="Instagram">
      <span><i class="fab fa-instagram"></i></span>
    </li>
  </ul>
  
  <script>
    // Optional JavaScript for additional interactivity
    document.querySelectorAll('.icon').forEach(icon => {
      icon.addEventListener('click', () => {
        // Add your click handlers here
        const platform = icon.getAttribute('data-tooltip');
        console.log(`Clicked ${platform} icon`);
        
        // Example: Open social media links
        /*
        const links = {
          'Facebook': 'https://facebook.com',
          'YouTube': 'https://youtube.com',
          'TikTok': 'https://tiktok.com',
          'Instagram': 'https://instagram.com'
        };
        window.open(links[platform], '_blank');
        */
      });
    });
  </script>
</body>
</html>

social moderno

Recomendado

Formulário de Login Moderno

Um código por andrej.social.network

Botões de mídia social pairando

HTML

CSS

JS

Recomendado

Formulário de Login Moderno

Um código por andrej.social.network

Botões de mídia social pairando

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS