Neon Lights Login Form - 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>Neon Lights Login Form</title> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; background: #000; font-family: 'Arial', sans-serif; margin: 0; } .login-container { background: rgba(0, 0, 0, 0.8); border-radius: 15px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); width: 360px; max-width: 100%; padding: 2rem; text-align: center; animation: neonFadeIn 1s ease-in-out; border: 2px solid #0f0; } .login-container h1 { font-size: 2rem; margin-bottom: 1.5rem; color: #0f0; text-shadow: 0 0 20px #0f0; } .input-group { margin-bottom: 1.5rem; } .input-group input { width: 80%; padding: 1rem; border-radius: 5px; border: 1px solid #0f0; font-size: 1rem; outline: none; background: #000; color: #0f0; box-shadow: 0 0 10px #0f0; } .login-btn { background: #0f0; border: none; border-radius: 5px; color: #000; padding: 1rem; width: 90%; font-size: 1rem; cursor: pointer; transition: background 0.3s; box-shadow: 0 0 10px #0f0; } .login-btn:hover { background: #00ff00; } .social-login { display: flex; justify-content: center; margin-top: 1rem; } .social-login a { background: rgba(0, 0, 0, 0.8); border-radius: 5px; margin: 0 5px; padding: 10px; display: inline-block; transition: transform 0.3s; box-shadow: 0 0 10px #0f0; color: #0f0; } .social-login a:hover { transform: scale(1.1); } @keyframes neonFadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } </style> </head> <body> <div class="login-container"> <h1>Login</h1> <div class="input-group"> <input type="text" placeholder="Username" required> </div> <div class="input-group"> <input type="password" placeholder="Password" required> </div> <button type="button" class="login-btn">Login</button> <div class="social-login"> <a href="#" title="Facebook"><i class="fab fa-facebook-f"></i></a> <a href="#" title="Google"><i class="fab fa-google"></i></a> <a href="#" title="Twitter"><i class="fab fa-twitter"></i></a> </div> </div> <script src="https://kit.fontawesome.com/f2c67a1c6b.js" crossorigin="anonymous"></script> </body> </html>