Custom Social Media Icons Hover - MeggiTools
Run
Toggle Theme
Share Link
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <title>Custom Social Media Icons Hover</title> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%); margin: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .social-icons { display: flex; gap: 20px; } .social-icons a { position: relative; display: inline-flex; justify-content: center; align-items: center; width: 80px; height: 80px; background: #fff; border-radius: 50%; box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1); text-decoration: none; color: #333; font-size: 2em; transition: all 0.3s; overflow: hidden; } .social-icons a::before, .social-icons a::after { content: ''; position: absolute; width: 100%; height: 100%; border-radius: 50%; transition: all 0.3s; } .social-icons a::before { background: rgba(0, 0, 0, 0.1); transform: scale(0); } .social-icons a::after { background: rgba(255, 255, 255, 0.3); transform: scale(2); opacity: 0; } .social-icons a:hover::before { transform: scale(1); } .social-icons a:hover::after { transform: scale(1); opacity: 1; } .social-icons a span { position: relative; z-index: 1; } .social-icons a .tooltip { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: #333; color: #fff; padding: 5px 10px; border-radius: 5px; font-size: 0.8em; opacity: 0; visibility: hidden; transition: all 0.3s; } .social-icons a:hover .tooltip { bottom: 110%; opacity: 1; visibility: visible; } @keyframes pulse { 0% { transform: scale(0.95); } 70% { transform: scale(1); } 100% { transform: scale(0.95); } } .social-icons a:hover { animation: pulse 1.5s infinite; } </style> </head> <body> <div class="social-icons"> <a href="#" title="Facebook"> <span class="fa fa-facebook-f"></span> <div class="tooltip">Facebook</div> </a> <a href="#" title="Twitter"> <span class="fa fa-twitter"></span> <div class="tooltip">Twitter</div> </a> <a href="#" title="Instagram"> <span class="fa fa-instagram"></span> <div class="tooltip">Instagram</div> </a> <a href="#" title="YouTube"> <span class="fa fa-youtube"></span> <div class="tooltip">YouTube</div> </a> </div> <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script> </body> </html>