Highly Excellence Badge - 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"> <title>Highly Excellence Badge</title> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #fce4ec; font-family: 'Arial', sans-serif; } .badge-container { position: relative; display: inline-block; cursor: pointer; } .badge { display: flex; align-items: center; background: linear-gradient(135deg, #f44336, #e57373); color: white; padding: 10px 20px; border-radius: 30px; font-size: 16px; font-weight: bold; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); transition: transform 0.3s, box-shadow 0.3s; } .badge:hover { transform: scale(1.1); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); } .badge .icon { margin-right: 10px; font-size: 24px; } .badge .emoji { margin-left: 10px; font-size: 24px; } .tooltip { visibility: hidden; background-color: #333; color: #fff; text-align: center; border-radius: 5px; padding: 5px; position: absolute; z-index: 1; bottom: 125%; left: 50%; transform: translateX(-50%); opacity: 0; transition: opacity 0.3s; } .badge-container:hover .tooltip { visibility: visible; opacity: 1; } @keyframes heartbeat { 0% { transform: scale(1); } 25% { transform: scale(1.2); } 50% { transform: scale(1); } 75% { transform: scale(1.2); } 100% { transform: scale(1); } } .badge.heartbeat { animation: heartbeat 2s infinite; } </style> </head> <body> <div class="badge-container"> <div class="badge heartbeat"> <span class="icon">🏆</span> <span>Highly Excellence Badge</span> <span class="emoji">🌟</span> </div> <div class="tooltip">Outstanding Performance!</div> </div> <script> document.querySelector('.badge-container').addEventListener('click', function() { alert('Excellence Badge clicked!'); }); </script> </body> </html>