social moderne

485 kevekıbhack

Ouvrir dans l'éditeur Publiez votre code

Recommandé

20 August 2025

Modèle HTML de blog de conception moderne

1 August 2025

Diaporama (Moderne)

18 November 2024

Modèle de site Web de portefeuille moderne

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 moderne

Recommandé

Modèle HTML de blog de conception moderne

Diaporama (Moderne)

Modèle de site Web de portefeuille moderne

HTML

CSS

JS

Recommandé

Modèle HTML de blog de conception moderne

Diaporama (Moderne)

Modèle de site Web de portefeuille moderne

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS