WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Neon Login Form
1439
securearray494
Open In Editor
Publish Your Code
Recommended
21 June 2024
Neon Toggle Switch
23 August 2025
Login & Register Form HTML CSS Template
14 October 2024
Sign Up Form
HTML
Copy
Login
Login
Forgot password?
CSS
Copy
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body { display: flex; justify-content: center; align-items: center; height: 100vh; background: #151515; } .login-container { background: #1b1b1b; padding: 40px 35px 60px; border-radius: 5px; box-shadow: inset 0 0 1px #272727; width: 370px; } h3 { text-align: center; color: #c7c7c7; font-weight: 600; letter-spacing: 2px; margin-bottom: 30px; } .input-group { margin-top: 20px; position: relative; } .input-group label { position: absolute; top: 0; left: 0; padding: 10px 0; font-size: 16px; color: #fff; pointer-events: none; transition: 0.5s; } .input-group input { width: 100%; padding: 10px 0; font-size: 16px; color: #fff; margin-bottom: 30px; border: none; border-bottom: 1px solid #fff; outline: none; background: transparent; } .input-group input:focus { color: #339933; box-shadow: 0 0 5px rgba(0, 255, 0, 0.2), inset 0 0 5px rgba(0, 255, 0, 0.1); background: linear-gradient(#333933, #222922); animation: glow 0.8s ease-out infinite alternate; } .input-group input:focus ~ label, .input-group input:valid ~ label { top: -20px; left: 0; color: #03e9f4; font-size: 12px; } @keyframes glow { 0% { border-color: #339933; box-shadow: 0 0 5px rgba(0, 255, 0, 0.2), inset 0 0 5px rgba(0, 0, 0, 0.1); } 100% { border-color: #6f6; box-shadow: 0 0 20px rgba(0, 255, 0, 0.6), inset 0 0 10px rgba(0, 255, 0, 0.4); } } .actions { display: flex; flex-direction: column; align-items: center; } .actions button { width: 100%; padding: 10px; background: linear-gradient(#333, #222); color: #fff; border: none; border-radius: 5px; font-size: 16px; cursor: pointer; margin-top: 30px; letter-spacing: 1px; transition: 0.5s; } .actions button:hover { background: #03e9f4; color: #fff; border-radius: 5px; box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4, 0 0 100px #03e9f4; } .actions a { font-size: 12px; color: #03e9f4; text-decoration: none; margin-top: 25px; } .actions a:hover { text-decoration: underline; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */