Simple and Cool Login form with HTML and CSS

In this article, you will learn how to create Login Form using only HTML & CSS. Earlier in this blog, I have shared a couple of simple Login form, but here in this blog, I am going to create a cool Login Form.

Login form is the most important part of any website. It is used to identify the user and give them access to restricted areas of the website. This type of form can be created using HTML and CSS. These are two different languages which are used for web design. The HTML code for a login form can be very simple or it can be complex depending on what you want it to do. There are many ways to create a login form. A simple and easy to customize Login form with HTML and CSS.

A login form can be created using HTML and CSS code. The code for the login form will be placed in the tag of an HTML document, and it will include a log-in button with text that says Log In or Sign In. This article will help you to create login form with HTML CSS. You can use this code for your any project.

Below is the video tutorials. watch and practices.

The login form is a form that is used to authenticate a user. It is usually found on the homepage of a website. A login form will typically include fields for entering a username and password. In some cases, it may also include other fields such as an email address or other contact information, which are optional for logging in. A typical login form will also have two buttons: one to submit the data and one to cancel or go back to a previous page.

Every website has a login form. It is the first thing that the user sees when they visit your website. It’s important to have a good looking login form, because it can make or break your site. The login form is a form that is used to create an account on a website. There are many different ways to create a login form, but most of them require some coding knowledge. In this article we will show you how to create a beautiful login form with HTML and CSS.

Source Code

If you like this login Form, then feel free to use it in your project. Copy the code by clicking on Copy button provided below.

First, you have to create two files. One of them is HTML, and the other is CSS. after creating the files, paste the code provided below.

HTML CODE:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Cool Login form | By Code Info</title>
  <link rel="stylesheet" href="style.css">
   <!-- Font Awesome Cdn Link -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
  <div class="wrapper">
    <h1>Hello Again!</h1>
    <p>Welcome back you've <br> been missed!</p>
    <form>
      <input type="text" placeholder="Enter username">
      <input type="password" placeholder="Password">
      <p class="recover">
        <a href="#">Recover Password</a>
      </p>
    </form>
    <button>Sign in</button>
    <p class="or">
      ----- or continue with -----
    </p>
    <div class="icons">
      <i class="fab fa-google"></i>
      <i class="fab fa-github"></i>
      <i class="fab fa-facebook"></i>
    </div>
    <div class="not-member">
      Not a member? <a href="#">Register Now</a>
    </div>
  </div>
</body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you have to create a file with .css extension.

CSS CODE:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } body{ background: #dfe9f5; } .wrapper{ width: 330px; padding: 2rem 0 1rem 0; margin: 50px auto; background: #fff; border-radius: 10px; text-align: center; box-shadow: 0 20px 35px rgba(0, 0, 0, 0.1); } h1{ font-size: 2rem; color: #07001f; } p{ margin-bottom: 1.7rem; } form input{ width: 85%; outline: none; border: none; background: #dfe9f5; padding: 12px 14px; margin-bottom: 10px; border-radius: 10px; } .recover{ text-align: right; font-size: 0.8rem; margin: 0.2rem 1.7rem 0 0; } .recover a{ text-decoration: none; color: #07001f; } button{ font-size: 1.1rem; margin-top: 1rem; padding: 8px 0; border-radius: 5px; outline: none; border: none; width: 85%; background: tomato; color: #fff; cursor: pointer; } button:hover{ background: rgba(122, 30, 30, 0.767); } .or{ font-size: 0.8rem; margin-top: 1.5rem; } .icons i{ color: #07001f; padding: 00.8rem 1.5rem; border-radius: 10px; margin-left: .9rem; font-size: 1.5rem; cursor: pointer; border: 2px solid #dfe9f5; } .icons i:hover{ color: #fff !important; background: #07001f; transition: 1s; } .icons i:first-child{ color: green; } .icons i:last-child{ color: blue; } .not-member{ font-size: 0.8rem; margin-top: 1.4rem; } .not-member a{ color: tomato; text-decoration: none; } a:hover{ text-decoration: underline; }

I hope you liked this snippet. If so, please share the blog and follow us in our social media profiles and stay connected with this blog. Thank you for visiting.

4 Comments

AnonymousJanuary 30, 2022 at 1:36 PM
Hey thanks for coding, I'm a beginner and i took your lesson from scratch but, icons is doesn't apper on my web page, i actually copy your css file and your icons
Christian SaiJune 7, 2022 at 5:58 AM
You are really amazing! Everything about your codes are awesome. Thanks so much professor 🙏🙏😍
Sabila PramestiMarch 25, 2023 at 8:12 PM
haii, i'm so happy because u can make me leare about html css, thank u soo much
IntegrasipayboskuOctober 3, 2023 at 5:23 AM
Ye

Source Code

HTML CODE:

CSS CODE:

4 Comments

Post a Comment

About Us

Contact Form