How To Create a Popup Login Form in HTML CSS

Popup Login Form in HTML CSS

This is a simple pop-up login form created using HTML and CSS. The login form we all use on different websites. However, CSS Popup Login Form is used in many places.

I have already shown you how to create an automatic popup window using JavaScript. However, this Popup Login Form has to be opened manually.

There is a button on the home page that can be clicked to see the popup. There is a form in the Popup Form which can be hidden by clicking on it.

Popup Login Form in HTML CSS

Popup Login Form HTML CSS has a cancel button first. Then there's a heading, two input boxes, a login button, and some links.
 
No JavaScript or JQuery was used to activate this popup. This Popup Login Form has been created using pure HTML and CSS.


See the Pen Popup Login form by Foolish Developer (@fghty) on CodePen.


Hope you like the live preview above. Below I have shared all the code that you can copy to create this Popup Form.

To create it, you first need to create an HTML and CSS file. Then add the following HTML and CSS code to that file.

Popup Login Form HTML Code

The following codes are HTML codes. First, you create an HTML file and then add all these codes to your HTML file. The popup login form contains all the information in the code.


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!--CSS file-->
  <link rel="stylesheet" href="style.css">
 
</head>
<body>
  <div class="center">
    <input type="checkbox" id="click">
    <label for="click" class="click-me">Login Form</label>
    <div class="content">
      <div class="text">
        LOGIN
      </div>
      <label for="click" id="times">x</label>
        <form>
          <label for="username">Username</label>
          <input type="text" placeholder="Email or Phone" id="username">
          <label for="password">Password</label>
          <input type="password" placeholder="Password" id="password">
 
          <button>Log In</button>
        </form>
      </div>
    </div>
  </div>
</body>
</html>

Popup Login Form CSS Code

These codes are CSS codes. Copy these codes and add them to your CSS file. I have already linked the CSS file to the HTML file. 

But for that, you must rename your CSS file using style.css. The modal Popup Login page has been designed by this CSS.


body{
  margin:0;
  padding:0;
  font-family:sans-serif;
  background: #dde1e7;
  min-height: 100vh;
}
.center,.content{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

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

}

#click{
  display:none;
}

.click-me:hover{
  color: #08adef;
  box-shadow: inset 2px 2px 5px #babecc,
              inset -5px -5px 10px #ffffff73;
}

.content{
  opacity:0;
  visibility:hidden;
  padding: 30px 35px 40px;
  box-sizing: border-box;
  border-radius: 5px;  
  width: 330px;
  height: auto;
  background: #dde1e7;
  box-shadow: -6px -6px 10px rgba(255, 255, 255, 0.8),
               6px 6px 10px rgba(0, 0, 0, 0.2);
}

#times{
  position:absolute;
  right:10px;
  top:20px;
  padding-left: 11px;
  padding-right: 11px;
  border-radius: 50%;
  font-size:25px;
  background: #dde1e7;
  padding: 3px;
  box-shadow: -4px -4px 7px #fffdfdb7,
              3px 3px 5px rgba(94, 104, 121, 0.24);
  cursor:pointer;
}

#click:checked~.content{
  opacity:1;
  visibility:visible;
}

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

form{
  margin-top: 40px;

}
label{
    display: block;
    margin-top: 30px;
    font-size: 16px;
    font-weight: 500;
}
input{
    display: block;
    height: 43px;
    width: 100%;
    background-color: rgba(255,255,255,0.07);
    border-radius: 3px;
    margin-top: 8px;
    font-size: 14px;
    font-weight: 300;
    border: none;
    box-shadow: inset 2px 2px 5px #babecc,
              inset -5px -5px 10px #ffffff73;

}
::placeholder{
    color: #4b4e4d;
    padding-left: 10px;
}
button{
  width: 100%;
  margin-top: 35px;
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 32px;
  padding: 12px;
  background: #dde1e7;
  border: none;
 box-shadow: -4px -4px 7px #fffdfdb7,
                3px 3px 5px rgba(94, 104, 121, 0.388);
}
button:hover{
  box-shadow: inset -3px -3px 7px #ffffffb0,
         inset 3px 3px 5px rgba(94, 104, 121, 0.692);
}

A simple article where you will know how to create Popup Login Form HTML CSS. Here is the required source code. If the above code is a problem, use the download button below.

Hopefully, you have learned how to create a Popup Login page using the code above. I have used very simple and straightforward code here.







Comments

Post a Comment

Tell me what you think ??😎

Popular posts from this blog

How to Create A Custom Select Box using HTML CSS

Image
In this article, you will learn how to create Custom Select Box using HTML CSS, and JavaScript. custom select dropdown we use in many places. This is a kind of dropdown menu . However, it is much more modern than the general dropdown menu.  This type of HTML custom Select Box has a small box. Clicking on which will bring up a dropdown. There are many options in that dropdown . The option that you select will be found in that box. If you click on that box again, you will see the options again.  If you select any other option, in the same way, that option will also be seen in that custom select box . If you have a basic idea about HTML and CSS , you can easily create it.  Custom Select Box CSS Here I have used a small amount of jquery. But if you do not know jquery then there will be no problem. Because very little JavaScript has been used here. Below is a demo that will help you learn how this HTML CSS custom select dropdown works. See the Pen HTML CSS Custom ...
Read more

Splash Image Mask Using HTML and CSS (Free Code)

Image
Here you will learn how to create Splash Image Mask using HTML CSS . The CSS mask image is a kind of simple design where there will be a background color on the image.  Some parts of that background will be transparent. As a result, we get to see some of the images in the background. You can use this CSS Splash Image Mask in any background image.  Here I used HTML in Aklin which added image. Then I designed it with CSS. You can use this CSS mask background image in the background of any project. Below is a preview that will help you to know how this Splash Image Mask CSS was created. See the Pen Splash Image Mask using Html CSS by Shantanu Jana ( @shantanu-jana ) on CodePen . Here HTML and CSS are used to create this CSS mask-image property . For this, you create an HTML and CSS file.  Copy all the code given below and add it to your file. Or use the download button at the bottom of the article to download the code for this Splash Image Mask . HTML Code:...
Read more

Responsive Footer Design with HTML and CSS (Free Code)

Image
If you want to make a Responsive Footer Design then this tutorial will help you completely. Earlier I shared many more types of CSS Footer Design tutorials with you. The design we have created here is absolutely simple and responsive.  If you know basic HTML and CSS then you can easily create this Responsive Footer Design HTML CSS. Footer is a significant element in any website. We see different types of footers on different websites. Some websites use simple footers and some websites use footers with a lot of information. Responsive Footer Design Below I have a video that will help you to know how it works. In this video, you will get the complete tutorial. Although I have shared the step-by-step tutorial below. Hopefully, the video above has helped you get its live preview and complete tutorial. However, I have given the full source code below the article. You can download those codes directly. Responsive Footer greatly enhances the quality of any website. You ca...
Read more