Skip to main content

Popup Login Form using Only HTML & CSS

In this article, I am going to show you how to create a pop-up login form using only HTML and CSS code. I have previously designed many more types of pop-up login forms, but in that case, I have used JavaScript. I did not use any JavaScript code in this design, only pure HTML and CSS code.

In the case of this type of design, the complete login form is hidden. Instead, a button appears on which the complete login form can be viewed by clicking on it. One type of design is much more attractive than the usual login design and enhances the quality of the website a lot.

 Like the normal form, it has everything here, namely the place to input the email ID and password and a login button. First I made a small button on the web page. Clicking on that button will show the complete login form. 

There is a small cancel button in the login form which if clicked will hide the complete login form again.

Video Tutorial of Popup Login Form

If you want to know the complete step-by-step how I made this design then you must follow the video tutorial below.




 As you can see in the video above, this is a very simple popup login form design. First of all, I made a small login button on the web page. Basically, I have used a Neumorphism design in this login form. 

The Neumorphism designs are basically much more interesting which is just made by the color effect of CSS. In this case, the login form and the color of the background are completely one. Only shades of white and black have been used to give these elements their own shape.

First of all, I used a title in the login form and there is a small cancel button next to it. There are also two input boxes for input and I have used separate icons for both. There is also a login button and some text.

Popup Login Form Design Using only HTML and CSS

Below I have provided the source code needed to make it so you can copy it and use it for your own purposes. For this, first of all, you have to create an HTML and CSS file. Attach the CSS file to the HTML file.

The following codes are HTML programming codes. You copy the codes then paste them into your HTML file.


<!DOCTYPE html>
<!--design By rajtemplate.com-->
<html lang="en" >
<head>
  <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">
<body>
<div class="center">
    <input type="checkbox" id="click">
    <!-- home page button-->
    <label for="click" class="click-me">Login Form</label>
    <div class="content">
      <div class="text"> LOGIN </div> <!--login title-->
        
      <label for="click" id="times">x</label> <!--cancle button-->
   
        <form>
          <!--Email id input place-->
          <div class="field"> 
             <div class="fas fa-envelope"></div>
             <input type="text" placeholder="Email or Phone">
          </div>
          <!--password input place-->
          <div class="field">
             <div class="fas fa-lock"></div>
             <input type="password" placeholder="Password">
          </div>
          <!--Login button-->
          <button>LOGIN</button>
          <!--Exter link-->
          <div class="link">
             Not a member?
             <a href="#">Signup now</a>
          </div>

       </form>

      </div>
    </div>
  </div>
</body>
</html>

The following codes are the CSS code used to style this login form. While using it, you can create a separate CSS file or paste it into your HTML file using style tags in the head section.


body{
  background: #dde1e7;  /* web page background color */
  user-select:none;
  min-height: 100vh;
  margin:0;
  padding:0;
  font-family:sans-serif;
}

.center,.content{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%); 
}

.click-me{  /* 1st button */
  text-align:center;
  font-size:22px;  /* text size */
  line-height:50px;   /* text line height */
  cursor:pointer;
  display:block;
  width:160px;   /* button width */
  height:50px;  /* button height */
  background: #dde1e7;  /* button background color */
  box-shadow: -3px -3px 7px #fffdfdcc,
              3px 3px 5px rgba(94, 104, 121, 0.342); /* button shadow */
  
}

#click{
  display:none;
}

.click-me:hover{
  color: #08adef; /* button hover effect */
  box-shadow: inset 2px 2px 5px #babecc,
              inset -5px -5px 10px #ffffff73;
}
.content{
  background: #dde1e7; /* login form background Color */
  padding: 30px 35px 40px;
  box-sizing: border-box;
  border-radius: 5px;
  opacity:0;
  visibility:hidden;
  width: 330px;  /* login form width */
  height: auto;
  box-shadow: -4px -4px 7px #fffdfdb7,
              3px 3px 5px rgba(94, 104, 121, 0.288);
}
 
#times{  /* cancel button */
  background: #dde1e7;  /* cancel button background color */
  padding: 3px;
  padding-left: 11px;
  padding-right: 11px;
  border-radius: 50%;
  position:absolute;
  right:10px;
  top:20px;
  font-size:25px;  
  cursor:pointer;
  box-shadow: -4px -4px 7px #fffdfdb7,
              3px 3px 5px rgba(94, 104, 121, 0.24);
}
 
#click:checked~.content{
  opacity:1;
  visibility:visible;
}

.text{  /* heading or title */
  font-size: 30px;  /* title font-size */
  color: #000000;  /* title text color */
  font-weight: 600;
  text-align: center;
  letter-spacing: 2px;
}

form{
  margin-top: 40px;
}

form .field{
  margin-top: 20px;
  display: flex;
}
 
.field .fas{
  height: 50px; /* input icon height */
  width: 60px;   /* input icon width */
  color: #868686;
  font-size: 20px;
  line-height: 50px;
  border: none;
  text-align: center;
  border-right: none;
  background: #dde1e7;   /* input icon background */
  box-shadow: inset 2px 2px 5px #babecc,
              inset -5px -5px 10px #ffffff73;
}

.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: none;
  background: #dde1e7; 
  box-shadow: inset 2px 2px 5px #babecc,
              inset -5px -5px 10px #ffffff73;
}
form button{
  color:  #363837;
  margin-top: 40px;
  border-radius: 5px!important;
  font-weight: 600;
  letter-spacing: 1px;
  cursor: pointer;
   box-shadow: -3px -3px 7px #fffdfdb7,
                2px 2px 5px rgba(94, 104, 121, 0.288);
}
 
button:hover{
  color: #339933;
  box-shadow: inset 2px 2px 5px #babecc,
              inset -5px -5px 10px #ffffff73;
}

.link{
  margin-top: 35px;
  color: #000000;
  text-align: center;
}

.link a{
  color: #08adef;
  text-decoration: none;
}

.link a:hover{
  text-decoration: underline;
}

 Hopefully, this popup login form design will work for you if you use the above codes. If there is any problem then of course you can download the codes using the download button below. 

You can watch the video tutorial above to know the complete step-by-step. If there is any problem or error, you can definitely comment.




Tags

Comments

Post a Comment

Ask Me Anything ........

Popular Posts

Responsive Navigation Menu Bar using only HTML & CSS

Responsive navigation menu bar plays an important role for every website. The navigation menu bar creates user satisfaction with the beauty of the website. The user needs a responsive navbar so that he can easily find the topic of his choice.  I have designed many more types of menubars before. But in that case, I used JavaScript code to execute the menu button. I have not used any JavaScript or external JavaScript library for this design. I have created this Responsive Navigation menu bar using pure CSS and HTML code. I only used CSS code to make it responsive. I have made it responsive using only the  @media function of CSS code. Here I have basically used a logo and used five menu items . I have used the hover effect on the menu links. The background color will change when you click on those items or move the mouse. Video Tutorial of Responsive Navigation Menu Bar You can watch the video tutorial below to know how it works and how to make it. How T...
Post a Comment
Read more

Show and Hide Password using Javascript

Show and Hide Password is a JavaScript project that is currently widely used. This allows you to hide the password or text in an input box.  Currently, we see such systems in almost all types of social media and website login forms. Even when we turn on the window, we see the Show and Hide Password option in the Password Input Place.  In this article, we are going to learn how to create a Show and Hide password system using JavaScript programming code. This type of system is used in a variety of login and registration forms . Earlier I designed many types of login forms but did not add the option to hide passwords and show. But in this article, I have shown that. This type of design is used where passwords are input. When you input the password, it is seen in bullet format. In that place, you will see a small button or icon which, when clicked, will turn the bullet marks into characters. Video Tutorial of Show and Hide Password  If you have difficulty unde...
Post a Comment
Read more

Neumorphism login form UI Design using HTML and CSS

In this article, I will show you how to create a Neumorphism login form UI design . We all know that the login form plays an important role in any website. Basically, we face the login form to access the account on different websites. Where we can log in to our account with a username and password.  Neumorphism is currently a very popular UI trend that is being used extensively to create a variety of web elements. This type of design is more beautiful than ordinary design and it is much easier to make.  This Neumorphism login form I created only with HTML and CSS code. Here is the complete color of the background color and the color of the web element. Basically, in this type of design, the background color of the web page and the element is completely the same. However, in this case, some shadows are created using CSS code which determines the size of these elements.  I put everything here like a normal login form . First of all, I added a title then there is no pla...
Post a Comment
Read more

Automatic Image Slider using Only HTML & CSS

In this article, I am going to show you how to create an automatic image slider using only HTML and CSS code. We know that an image slider is a simple web element that is used to organize different images of the website in one place.  There are different types of image sliders and the most automatic image slider is used. This type of slider is mainly used in the hero section of the homepage of various websites. In addition, different types of services or portfolio websites are used to decorate the images of many types of projects.  Basically, this type of design has no navigation buttons which means there is no way to change the image manually. The images here will continue to change automatically from time to time. You can set this time in advance.  First of all, I set the background of a web page to black. Then I arranged all the images nicely there. In this case, I did not use any JavaScript code . It was created using effects in the animation of css3. ...
1 comment
Read more

Neumorphism Social Media Buttons using HTML & CSS

Neumorphism Social Media Buttons are much more beautiful than ordinary button designs. You can make this type of design using only HTML and CSS. In this article, I am going to show how CSS  Neumorphism social media buttons are created using HTML and CSS code. Earlier I showed the design of many more types of social media buttons using Neumorphism design. Neumorphism is a phenomenal UI trend that is currently being used to create a variety of elements. Such designs are much more attractive and much easier to make. These are basically made using a box-shadow of CSS code.  There are two types of Neumorphism designs , one is dark and the other is light. In this case, I have made light Neumorphism social media buttons. Social media buttons are used in different places so that the user can share the content in his social account. CSS Neumorphism Social Media Buttons [Live Demo]  Below I have given a live demo that will help you understand how this CSS Neumorphism social m...
Post a Comment
Read more