WEBLEB
Home
AI Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Animated HTML Login Form
2600
dev_b
Open In Editor
Video
Publish Your Code
0
Recommended
22 June 2025
Creative Blog: Design, Podcast & Portfolio HTML
26 May 2025
Admin Dashboard HTML CSS
25 November 2025
Stick Merge Game HTML5 Source Code
HTML
Copy
Animated Login Form
Login
Username
Password
Login
Forgot Password?
CSS
Copy
body { font-family: Arial, sans-serif; background-color: #f0f2f5; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .login-container { background: white; padding: 20px; border-radius: 10px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); width: 300px; transition: transform 0.3s ease; } .login-container:hover { transform: scale(1.05); } h2 { text-align: center; margin-bottom: 20px; color: #333; } .form-group { margin-bottom: 15px; } label { display: block; margin-bottom: 5px; color: #333; } input[type="text"], input[type="password"] { width: 93%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; transition: border-color 0.3s; } input[type="text"]:focus, input[type="password"]:focus { border-color: #007bff; outline: none; } button { width: 100%; padding: 10px; background-color: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s; margin-top: 10px; } button:hover { background-color: #0056b3; } .forgot-password { text-align: center; margin-top: 10px; } .forgot-password a { color: #007bff; text-decoration: none; } .forgot-password a:hover { text-decoration: underline; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */