sociale moderno

Apri nell'Editor Video Pubblica il Tuo Codice

Consigliato

1 July 2025

Modello HTML per blog dal design moderno

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>

sociale moderno

Consigliato

Modulo di accesso moderno V2

sito web moderno

Modello HTML per blog dal design moderno

HTML

CSS

JS

Consigliato

Modulo di accesso moderno V2

sito web moderno

Modello HTML per blog dal design moderno

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS