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

Animated Progress Bar using Only HTML and CSS

Animated progress bar is mainly used in various business and personal web sites. css progress bar helps to organize your knowledge in a beautiful way. In this article, I am going to show you how to create an animated progress bar using only HTML and CSS code. I have made many other types of Progress Bar before but in that case, I have used JavaScript.  I have not used any JavaScript or external JavaScript library for this design. I created this Animated Progress Bar design using Pure HTML and CSS code. Skill bars are used on various websites to streamline the amount of experience, education, etc. with the help of animations. First of all, I have given the background-color: # 30336b of a web page. Then I made a small box here. I used four CSS Progress Bar in that box. The value of this bar will be zero when opening the page then gradually it will reach the pre-determined meaning. Video Tutorial of Pure CSS Progress Bar If you want to know how to make it better then you can watc
Post a Comment
Read more

Sidebar Menu Using Only HTML and CSS

This article shows you how to create sidebar menus using HTML and CSS code only. I have previously created many types of sidebars and navigation menubars using only HTML and CSS code so you can see those designs if you want.  Side Menubar A popular web element is currently used in the sidebar along with menubars on various websites. Undoubtedly the side menu bar is much more attractive and for this, the quality and beauty of the website are greatly enhanced. Under normal circumstances, I have completely hidden the menu bar on the web page.  There is a menu button that can be clicked to view the entire menu bar. There is also a cancel button which, when clicked, will completely hide the sidebar. In the sidebar, I have added links to various menu items, profile names, profile images, social media platforms.  First I gave the profile image and below that, I gave the profile name. Then I added some menu items here and added icons to each menu item. Then I created the buttons of fo
Post a Comment
Read more