WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
निःशुल्क सरल HTML लॉगिन फ़ॉर्म
3657
lebdev
संपादक में खोलें
अपना कोड प्रकाशित करें
अनुशंसित
28 August 2025
मैट्रिक्स लॉगिन रजिस्टर फॉर्म HTML CSS
10 August 2024
HTML लॉगिन फॉर्म कोड
18 September 2024
हैकर लॉगिन
HTML
Copy
Login Form
Login
Username
Password
CSS
Copy
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap'); html { height: 100%; font-family: Montserrat; } .login-box { position: absolute; top: 50%; left: 50%; width: 400px; padding: 40px; transform: translate(-50%, -50%); background: rgba(0,0,0,.5); box-sizing: border-box; box-shadow: 0 15px 25px rgba(0,0,0,.6); border-radius: 10px; } .login-box h2 { margin: 0 0 30px; padding: 0; color: #fff; text-align: center; } .login-box .user-box { position: relative; } .login-box .user-box 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; } .login-box .user-box label { position: absolute; top:0; left: 0; padding: 10px 0; font-size: 16px; color: #fff; pointer-events: none; transition: .5s; } .login-box .user-box input:focus ~ label, .login-box .user-box input:valid ~ label { top: -20px; left: 0; color: #03e9f4; font-size: 12px; } .login-box form a { position: relative; display: inline-block; padding: 10px 20px; color: #03e9f4; font-size: 16px; text-decoration: none; text-transform: uppercase; overflow: hidden; transition: .5s; margin-top: 40px; letter-spacing: 4px }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */