We will create a login Form using HTML and CSS code in today's blog. We are going to create a website's stylish login form design. We currently only accept your email address and password as login form.
As you can see from the screenshot of a login form I provided on this page has a login form as well. We will construct this program's login form today. I have already entered my email address and password in this login form, as you can see.
To access a page or form that is restricted, one must enter authentication credentials through a login form. There are fields on the login form for the password and the username. The underlying code of the login form verifies the validity of the credentials when it is submitted, allowing the user to access the restricted page. The user will not be able to get past the login form if they are unable to provide valid credentials.
Login Form In HTML and CSS with Source Code
To Stylish Login Form In HTML and CSS. The three files you must first create are the HTML, CSS, and JavaScript files. Simply copy and paste the provided codes into your file after creating these files. Using the download button below, you can also get the source code files for Stylish Login Form.
First, make an HTML file called index.html in your login form folder, then paste the provided codes into it. Recall that you must create a file ending in .html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Stylish Login Form</title>
<link rel='stylesheet'
href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css'><link
rel="stylesheet" href="./style.css">
</head>
<body>
<div class="login-form">
<div class="text">
LOGIN
</div>
<form>
<div class="field">
<div class="fas fa-envelope"></div>
<input type="text" placeholder="Email or Phone">
</div>
<div class="field">
<div class="fas fa-lock"></div>
<input type="password" placeholder="Password">
</div>
<button>LOGIN</button>
<div class="link">
Not a member?
<a href="#">Signup now</a>
</div>
</form>
</div>
</body>
</html>
Next, make a CSS file called style.css in your login form folder, and insert the provided codes into it. Recall that a file with a .css extension must be created.
@import url("https://fonts.googleapis.com/css?family=Poppins&display=swap");
* {
margin: 0;
padding: 0;
font-family: "Poppins", sans-serif;
}
body {
display: flex;
height: 100vh;
text-align: center;
align-items: center;
justify-content: center;
background: #151515;
}
.login-form {
position: relative;
width: 370px;
height: auto;
background: #1b1b1b;
padding: 40px 35px 60px;
box-sizing: border-box;
border: 1px solid black;
border-radius: 5px;
box-shadow: inset 0 0 1px #272727;
}
.text {
font-size: 30px;
color: #c7c7c7;
font-weight: 600;
letter-spacing: 2px;
}
form {
margin-top: 40px;
}
form .field {
margin-top: 20px;
display: flex;
}
.field .fas {
height: 50px;
width: 60px;
color: #868686;
font-size: 20px;
line-height: 50px;
border: 1px solid #444;
border-right: none;
border-radius: 5px 0 0 5px;
background: linear-gradient(#333, #222);
}
.field input,
form button {
height: 50px;
width: 100%;
outline: none;
font-size: 19px;
color: #868686;
padding: 0 15px;
border-radius: 0 5px 5px 0;
border: 1px solid #444;
caret-color: #339933;
background: linear-gradient(#333, #222);
}
input:focus {
color: #339933;
box-shadow: 0 0 5px rgba(0, 255, 0, 0.2), inset 0 0 5px rgba(0, 255, 0, 0.1);
background: linear-gradient(#333933, #222922);
animation: glow 0.8s ease-out infinite alternate;
}
@keyframes glow {
0% {
border-color: #339933;
box-shadow: 0 0 5px rgba(0, 255, 0, 0.2), inset 0 0 5px rgba(0, 0, 0, 0.1);
}
100% {
border-color: #6f6;
box-shadow: 0 0 20px rgba(0, 255, 0, 0.6),
inset 0 0 10px rgba(0, 255, 0, 0.4);
}
}
button {
margin-top: 30px;
border-radius: 5px !important;
font-weight: 600;
letter-spacing: 1px;
cursor: pointer;
}
button:hover {
color: #339933;
border: 1px solid #339933;
box-shadow: 0 0 5px rgba(0, 255, 0, 0.3), 0 0 10px rgba(0, 255, 0, 0.2),
0 0 15px rgba(0, 255, 0, 0.1), 0 2px 0 black;
}
.link {
margin-top: 25px;
color: #868686;
}
.link a {
color: #339933;
text-decoration: none;
}
.link a:hover {
text-decoration: underline;
}
That's it; you've now created an Stylish login form using HTML and CSS. Please download the source code files using the provided download button if your code isn't working or if you're having any issues. A zip file containing the project folder containing the source code files will be downloaded for free.