Skip to content
No results
Home
Services
About Us
Blog
Contact
All Elements
Unravelly
Home
Services
About Us
Blog
Contact
All Elements
Search
Unravelly
Search
Menu
New form neon
HTML
CSS
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="styles.css" /> <title>Neon Login Form</title> </head> <body> <div class="container"> <form class="neon-form"> <h1>Login</h1> <div class="input-group"> <label for="username">Username</label> <input type="text" id="username" name="username" required /> </div> <div class="input-group"> <label for="password">Password</label> <input type="password" id="password" name="password" required /> </div> <button type="submit">Login</button> </form> </div> </body> </html>
Copy
/*body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #222; } */ /*.container { max-width: 400px; width: 100%; }*/ .neon-form { background-color: #222; padding: 30px; border-radius: 10px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); text-align: center; color: #fff; } .neon-form h1 { margin-bottom: 20px; font-family: 'Arial', sans-serif; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 2px; } .input-group { margin-bottom: 20px; text-align: left; } label { display: block; margin-bottom: 5px; font-size: 14px; font-weight: 500; color: #6c5ce7; /* Changed label color */ transition: color 0.3s ease; /* Added color transition effect */ } label:hover { color: #ff00ff; /* Changed color on hover */ } input { width: 100%; padding: 10px; border-radius: 5px; border: 2px solid #333; background-color: #222; color: #fff; outline: none; transition: border-color 0.3s ease; } input:focus { border-color: #6c5ce7; } button { width: 100%; padding: 10px; border: none; border-radius: 5px; background-color: #6c5ce7; color: #fff; font-size: 16px; font-weight: 600; text-transform: uppercase; cursor: pointer; outline: none; transition: background-color 0.3s ease; } button:hover { background-color: #4834d4; } /* Neon Glow Effect */ .neon-form { position: relative; } .neon-form::before { content: ''; position: absolute; top: -8px; left: -8px; right: -8px; bottom: -8px; border-radius: 10px; background: linear-gradient( 45deg, #ff00ff, #ff4d4d, #ffff4d, #00ff00, #00ffff, #4d4dff, #ff00ff ); z-index: -1; animation: neon-glow 1.5s linear infinite, color-change 10s ease infinite; /* Added color-change animation */ } @keyframes neon-glow { 0% { filter: blur(8px); opacity: 0.8; } 50% { filter: blur(12px); opacity: 0.5; } 100% { filter: blur(8px); opacity: 0.8; } } @keyframes color-change { 0%, 100% { background-color: #ff00ff; } 12.5% { background-color: #ff4d4d; } 25% { background-color: #ffff4d; } 37.5% { background-color: #00ff00; } 50% { background-color: #00ffff; } 62.5% { background-color: #4d4dff; } 75% { background-color: #ff00ff; } }
Copy
Preview Area
Texts
Latest UI Forms
Neon Login Form
Login
Username
Password
Login
< /> View Code