Create a Login Form with HTML CSS

As you know, A login form is used to access a restricted page or form. The login form contains a field for the username and password that the user uses to login into the page or form. The login form is basically a record form like a search form.

As you see in the output of the Glowing login form. If you type the username in the form the username section glows but in the password section it does not glow. until you do not give any input in username or password it does not glow. When you give any input in the form it glows the particular section.

As you know a login form contains a username and password. First, create a Form tag. inside the use h1 tag for heading Login form. after that create a div for the form input material. then we have to use an input type tag for username and password input. After that create a button for login that’s all in the HTML section

In the CSS section, we style the Sneakers Product Card using different CSS styling properties:

Code By	Aditya Gadhave
Language Used	HTML And CSS
Responsive	Yes
External Link / Dependencies	Yes

There are 3 types of styles to connect CSS with HTML files. Inline CSS, Internal CSS, External CSS. For Inline CSS in this, we have to write the CSS code inside the HTML code using style Attribute elements. For internal CSS we have to use the Style tag in the Head section on HTML File. We have used this Internal CSS in The below section. Last is External CSS for this we have to create another CSS File in the same folder this

Code :

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - Transparent Material Login Form</title>
  <link rel='stylesheet' href='https://cdn.jsdelivr.net/gh/alphardex/aqua.css@master/dist/aqua.min.css'><link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<form class="login-form" action="javascript:void(0);">
  <h1>Login Form</h1>
  <div class="form-input-material">
    <input type="text" name="username" id="username" placeholder=" " autocomplete="off" class="form-control-material" required />
    <label for="username">Username</label>
  </div>
  <div class="form-input-material">
    <input type="password" name="password" id="password" placeholder=" " autocomplete="off" class="form-control-material" required />
    <label for="password">Password</label>
  </div>
  <button type="submit" class="btn btn-primary btn-ghost">Login</button>
</form>
<!-- partial -->

</body>
</html>

CSS Code:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #eceffc;
}

.btn {
  padding: 8px 20px;
  border-radius: 0;
  overflow: hidden;
}
.btn::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent, var(--primary-color), transparent);
  transform: translateX(-100%);
  transition: 0.6s;
}
.btn:hover {
  background: transparent;
  box-shadow: 0 0 20px 10px rgba(51, 152, 219, 0.5);
}
.btn:hover::before {
  transform: translateX(100%);
}

.form-input-material {
  --input-default-border-color: white;
  --input-border-bottom-color: white;
}
.form-input-material input {
  color: white;
}

.login-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 50px 40px;
  color: white;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 10px;
  box-shadow: 0 0.4px 0.4px rgba(128, 128, 128, 0.109), 0 1px 1px rgba(128, 128, 128, 0.155), 0 2.1px 2.1px rgba(128, 128, 128, 0.195), 0 4.4px 4.4px rgba(128, 128, 128, 0.241), 0 12px 12px rgba(128, 128, 128, 0.35);
}
.login-form h1 {
  margin: 0 0 24px 0;
}
.login-form .form-input-material {
  margin: 12px 0;
}
.login-form .btn {
  width: 100%;
  margin: 18px 0 9px 0;
}

Output:

Conclusion

After creating this Glowing Login Form you will able to know how to create a Login Form easily. From this project, you will learn about different properties of CSS.

Building a Simple Login Form with HTML CSS.

Day 56 Of 60 : Step-by-Step Guide to Making a Login Form with HTML and CSS

Conclusion