Professional Link - 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>Professional Link</title> <style> @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap'); @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css'); body { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f0f2f5; font-family: 'Poppins', sans-serif; } .custom-link { position: relative; display: inline-block; padding: 15px 30px; font-size: 18px; font-weight: 600; color: #fff; text-decoration: none; background: linear-gradient(45deg, #1d8cf8, #3358ff); border-radius: 50px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); transition: all 0.4s ease; } .custom-link:hover { background: linear-gradient(45deg, #3358ff, #1d8cf8); box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15); transform: translateY(-5px); } .custom-link i { margin-right: 10px; transition: transform 0.4s ease; } .custom-link:hover i { transform: rotate(360deg); } .custom-link::before, .custom-link::after { content: ""; position: absolute; width: 24px; height: 24px; background-color: #ff4081; border-radius: 50%; transition: all 0.4s ease; } .custom-link::before { top: -12px; left: -12px; } .custom-link::after { bottom: -12px; right: -12px; } .custom-link:hover::before, .custom-link:hover::after { width: 30px; height: 30px; background-color: #ff80ab; } @keyframes pulse { 0% { transform: scale(0.95); } 70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(255, 64, 129, 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 64, 129, 0); } } .custom-link:hover::before, .custom-link:hover::after { animation: pulse 1.5s infinite; } </style> </head> <body> <a href="#" class="custom-link"> <i class="fas fa-star"></i> Click Me! </a> </body> </html>