<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Unique Neon Button</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="btn-container"> <button class="neon-button">Click Me</button> </div> </body> </html>
body { background-color: #0f0f0f; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .btn-container { text-align: center; } .neon-button { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 18px; padding: 14px 32px; border: none; border-radius: 12px; background: linear-gradient(135deg, #00f0ff, #ff00c8); color: white; cursor: pointer; box-shadow: 0 0 15px #00f0ff, 0 0 30px #ff00c8, 0 0 60px #00f0ff; transition: all 0.3s ease; position: relative; overflow: hidden; } .neon-button::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255,255,255,0.2) 10%, transparent 80%); animation: pulse 2s infinite; pointer-events: none; } @keyframes pulse { 0% { transform: scale(0.9); opacity: 1; } 100% { transform: scale(1.1); opacity: 0; } } .neon-button:hover { transform: translateY(-4px); box-shadow: 0 0 25px #00f0ff, 0 0 50px #ff00c8, 0 0 100px #00f0ff; } .neon-button:active { transform: scale(0.95); box-shadow: 0 0 10px #00f0ff, 0 0 20px #ff00c8; }
Please log in to join the conversation
Loading Comments