Login form using html and css with source code

In this article, we given a login form using html and css with complete source code to add on website or project. Try this project in your vs code to check how it works. We created a simple and basic login form using html and css. Let's go and check the source code.

To add this project in vs code, follow the given process :-

1) Create a New folder in file manager name as - Login-form.

2) Open the folder in VS code.

3) Add file name as - index.html and copy the html code as given.

4) Add another file name as - style.css and copy the css code as given.

5) Then run the code or check the preview with code preview extension in vs code.

Login form using html and css source code

Here we given a html and css source code of login form as given -

HTML

In HTML, we've created a structure using form tag. In form tag, we added a input fields to add username and password and also added a button to submit the details after filling out.

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Login form using html and css</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="login">
  <h2>Login form</h2>
  <form>
    <div class="user">
      <input type="text" name="" required="">
      <label>Username</label>
    </div>
    <div class="user">
      <input type="password" name="" required="">
      <label>Password</label>
    </div>
    <button>Login</button>
  </form>
</div>
</body>
</html>

CSS

In CSS, we given proper position to the form and designed the form. Also added a hover property to show it attractive.

html {
    height: 100%;
}

body{
    margin:0;
    padding:0;
    font-family: sans-serif;
    background: linear-gradient(#000000, #000000);
}
  
.login{
    position: absolute;
    top: 50%;
    left: 50%;
    width:350x;
    padding: 40px;
    text-align: center;
    transform: translate(-50%, -50%);
    background: rgba(31, 30, 30, 0.7);
    box-sizing: border-box;
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.6);
    border-radius: 10px;
}
  
.login h2 {
    margin: 0 0 30px;
    padding: 0;
    color: #fff;
    text-align: center;
}
  
.login .user {
    position: relative;
}
  
.login .user input {
    width: 100%;
    padding: 10px 0;
    font-size: 16px;
    color: #fff;
    margin-bottom: 30px;
    border: none;
    border-bottom: 1px solid #fff;
    outline: none;
    background: transparent;
}
  
.login .user label {
    position: absolute;
    top:0;
    left: 0;
    padding: 10px 0;
    font-size: 16px;
    color: #666666;
    pointer-events: none;
    transition: .5s;
}
  
.login .user input:focus ~ label,
  .login .user input:valid ~ label {
    top: -20px;
    left: 0;
    color: #ffffff;
    font-size: 12px;
}
  
.login button{
    position: relative;
    padding: 10px;
    color: #080808;
    font-size: 15px;
    overflow: hidden;
    transition: .5s;
    letter-spacing: 4px;
    margin-top: 10px;
}
  
.login button:hover {
    background: #000000;
    color: #fff;
    border:none;
    border-radius: 4px;
    box-shadow: 0 0 15px -2px white;
}

Output

Check this output of login form -

Watch the video for more -

Also see this -

Registration form using html and css with source code

Hope this tutorial will help you to use Login form with source code. if you have any confusion or query then you can contact us on our coding community.

Checkout more projects on our website and join our coding community on telegram to get more knowledge about coding.

Login form using html and css with source code

Login form using html and css source code

HTML

CSS

Output

Watch the video for more -

Contact Form