WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Simple Login Form
5202
webleb
Publish Your Code
Recommended
17 November 2023
Login
18 September 2024
Login button
1 July 2025
Modern Login Form V2
index.html
Copy
<html lang="en-US"> <head> <meta charset="utf-8" /> <title>Webleb</title> <link rel="stylesheet" href="/css/styles.css" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" /> </head> <body style=" height:100%;display:flex ; justify-content: center; align-items: center;"> <div id="login"> <form name="form-login"> <input type="text" class="input" id="user" placeholder="Username" /> <input type="password" class="input" id="pass" placeholder="Password" /> <button type="submit" class="submitbtn">Login</button> </form> </div> </body> </html>
styles.css
Copy
body { background: #2c3338; color: #606468; font: 87.5%/1.5em 'Open Sans', sans-serif; margin: 0; height: 100vh; } input { border: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 16px; line-height: 1.5em; padding: 0; } p { line-height: 1.5em; } after { clear: both; } #login { margin: 50px auto; width: 320px; } #login form { margin: auto; padding: 30px; border-radius: 10px; background: #22272a; } .input{ background-color: #3b4148; border-radius:10px; color: #a9a9a9; margin-bottom: 1em; padding: 0 16px; width: 100%; outline: 0; height: 50px; } .submitbtn { background: #0c787d; border: 0; width: 100%; height: 40px; border-radius: 10px; color: white; cursor: pointer; transition: background 0.3s ease-in-out; } .submitbtn:hover { background: #076064; }
main.js
Copy
// Nothing to Copy
