Login Form

Developer
Emre
Size
1,996 Kb
Views
12,144
  1. Login Form Previews
  2. Login Form HTML Codes
  3. Login Form CSS Codes

How do I make an login form?

Simple flat login form.Forked from SirWags's Pen Login Form.. What is a login form? How do you make a login form? This script and codes were developed by Emre on 11 October 2022, Tuesday.

Login Form Previews
IQ Test

Login Form - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Login Form</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html lang="tr-TR">
<head>
<meta charset="utf-8">
<title>Login</title>
</head> <div id="login"> <form name='form-login'> <input type="text" id="user" placeholder="Username"> <input type="password" id"pass" placeholder="Password"> <input type="submit" value="Login">
</form>
</body>
</html>

Login Form - Script Codes CSS Codes

@charset "utf-8";
body { background: #373431; color: #606468; font: 87.5%/1.5em 'Open Sans', sans-serif; margin: 0;
}
input { border: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 16px; line-height: 1.5em; padding: 0; -webkit-appearance: none; background: #3C3835; height: 40px; transition: background 0.3s ease-in-out;
}
input:focus { background: #4B4643; outline: none;
}
p { line-height: 1.5em;
}
after { clear: both; }
#login form {
padding: 22px 22px 22px 22px;
margin: 50px auto;
width: 268px;
border-radius: 8px;
background: #302D2A;
border: 3px solid #443F3B;
}
#login form input[type="text"] { border-radius:4px; color: #a9a9a9; margin-bottom: 1em; padding: 0 16px; width: 235px;
}
#login form input[type="password"] { border-radius:4px; color: #a9a9a9; margin-bottom: 1em; padding: 0 16px; width: 235px;
}
#login form input[type="submit"] { background:#50A500; border: 0; width: 100%; height: 40px; border-radius: 4px; color: white; cursor: pointer; transition: background 0.3s ease-in-out;
}
#login form input[type="submit"]:hover { background: #A59E00;
}
Login Form - Script Codes
Login Form - Script Codes
Home Page Home
Developer Emre
Username emredenx
Uploaded October 11, 2022
Rating 3
Size 1,996 Kb
Views 12,144
Do you need developer help for Login Form?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Emre (emredenx) Script Codes
Name
CSS Text Slide Animation
Combining z-axis and x-axis translation
Simple Responsive Popup
Jquery Numeric Keypad Plugin - Mobile Supported
CSS3 Seperator
Google Map Marker and Dark Style
Radio Button Style width Css
Auto Absolute Tooltip Left Right Top Bottom
CSS3 Read More toggle - no js
Jquery Search List System
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!