Popup Login Form Design using only HTML & CSS
Tags: html, css, webdev, beginners
Published: 2021-09-19 16:01:58

In this article, I am going to show you how to create a pop-up login form using HTML and CSS. You must have seen different types of websites or applications pop-ups or modal boxes. Which undoubtedly increases the quality of the website a lot.

The popup login form is a modern design login page. It is hidden under normal conditions. A button or link can be found on the webpage. When we click on that link, we will see the full form.

You can [watch the live demo](https://www.foolishdeveloper.com/2021/09/how-to-create-popup-login-form-using.html) to see how it works. Now it's time to learn from the complete tutorial how I designed this popup login form with the help of HTML and CSS. Before sharing this tutorial, I would like to say something about this design.

I made this design with the help of Neumorphism. Under normal circumstances, we will see a small button on the homepage. When you click on that button, you will see the complete login form. 


### Step 1: Design the web page

I designed the web page using this small amount of CSS code below. Here I used the background color of the web page `# dde1e7`.

```css
body{
  margin:0;
  padding:0;
  font-family:sans-serif;
  background: #dde1e7;
  min-height: 100vh;
}
```
![Design the web page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zc0qkub60o6316j9vuql.jpg)
I added the login form and the popup button between the div below.
```html
<div class="center">

   <!-- Home page button -->
   

   <!-- Popup login form -->

</div>
```
### Step 2: Create a popup button on the web page
 I have created a button on the homepage using the HTML and CSS code below. As I said before, you can see only one button on the homepage.

Now the following codes have helped to create and design it. I used the button `160px width` and `50px height`.

```html
<input type="checkbox" id="click">
    <label for="click" class="click-me">Login Form</label>
```
```css
#click{
  display:none;
}

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

```
![Create a popup button on the web page](https://1.bp.blogspot.com/-R8cPEqPym-o/YUYzMXBhH4I/AAAAAAAABoY/pvgAkoFGtiIhvsFk4Mhk74DpXc0G2t4qQCLcBGAsYHQ/s16000/Screenshot%2B%2528630%2529.jpg)
 
Now I have added the hover effect. When you click on that button, you will see some changes here.
```css
.click-me:hover{ 
     color: #08adef;
     box-shadow: inset 2px 2px 5px #babecc,
                     inset -5px -5px 10px #ffffff73; }

```
![](https://1.bp.blogspot.com/-TTBOCnvRKK0/YUYzVDlplNI/AAAAAAAABoc/mGac6_oat_wPGrMywqpEM9pN7FOzOXg4QCLcBGAsYHQ/s16000/Screenshot%2B%2528630%2529%2B%25282%2529.jpg)
### Step 3: Create the basic structure of the login form
Now I have created a popup box in which I will add all the information of the login form.

I have used `opacity: 0` in the CSS code. opacity: 0 will help to keep this form completely hidden under normal circumstances. 

The length of this box is 330 px and I have used Height Auto. Here too I have used the background color white.
```html
<div class="content">

</div>
```
```css
.center,.content{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);

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

Now I have implemented this pop-up. Above we have used opacity Zero which means it will not be seen. Now I have used `opacity 1 `which means this login form will appear when you click on the home page button.

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

![Create the basic structure of the login form](https://1.bp.blogspot.com/-2M9wY6qqB3Q/YUYz5BjdJxI/AAAAAAAABoo/rmo96izKQRMesJFeoWHavypsaYsOl_FnQCLcBGAsYHQ/s16000/Screenshot%2B%2528630%2529%2B%25283%2529%2B%25281%2529.jpg)
 
### Step 4: Add titles to the login form 
Now I have added a title using these codes. I have used `font size 30 px` and `font-weight: 600` to increase the size of this title.
```html
<div class="text"> LOGIN </div>
```
```css
.text{
  font-size: 30px;
  color: #000000;
  font-weight: 600;
  text-align: center;
  letter-spacing: 2px;
}
```
![Add titles to the login form ](https://1.bp.blogspot.com/-S9ZStVAiYs4/YUY0B7o23gI/AAAAAAAABos/z7ncSqcpmLMSZVfOACFeGOJd7Kr1yKzHACLcBGAsYHQ/s16000/Screenshot%2B%2528630%2529%2B%25283%2529.jpg)
 
### Step 5: Create a cancel button
Now it's time to create a cancel button that will help you hide the login form again. 

This button is along the right side of the login form. Its position uses absolute to position it in a certain place.

```html
 <label for="click" id="times">x</label>
```
```css
#times{
  position:absolute;
  right:10px;
  top:20px;
  font-size:25px;
  background: #dde1e7;
  padding: 3px;
  padding-left: 11px;
  padding-right: 11px;
  border-radius: 50%;

  box-shadow: -4px -4px 7px #fffdfdb7,
              3px 3px 5px rgba(94, 104, 121, 0.24);
  cursor:pointer;
}
```
![Create a cancel button](https://1.bp.blogspot.com/-JMNFnJbTuJU/YUY0K6NhipI/AAAAAAAABow/y7yVDk5Q0qACG6HelcFfFLZjbDLbUwO7gCLcBGAsYHQ/s16000/Screenshot%2B%2528630%2529%2B%25284%2529.jpg)
 
### Step 6: Create a place to input emails and passwords
Now we have created a place to input using the following HTML and CSS code. I used levels with each input. 

```html
<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">

</form>
```
I have designed the levels with the help of CSS below.

```css
form{
  margin-top: 40px;

}
label{
    display: block;
    margin-top: 30px;
    font-size: 16px;
    font-weight: 500;
}
```
I have designed the input spaces using these codes.

```css
input{
    display: block;
    height: 43px;
    width: 100%;
    background-color: rgba(255,255,255,0.07);
    border-radius: 3px;
    border: none;
    box-shadow: inset 2px 2px 5px #babecc,
              inset -5px -5px 10px #ffffff73;
    margin-top: 8px;
    font-size: 14px;
    font-weight: 300;
}
::placeholder{
    color: #4b4e4d;
    padding-left: 10px;
}
```
![Create a place to input emails and passwords](https://1.bp.blogspot.com/-WfocvKApOQQ/YUY0ean6_dI/AAAAAAAABo8/UsRY2R7VBxwFrxIAKYn7VLOYXoPVn70yQCLcBGAsYHQ/s16000/Screenshot%2B%2528630%2529%2B%25285%2529.jpg)
 
### Step 7: Create a login button in the popup login form
Now I have added a login button in this login form. I used `padding 12 px` to determine the size of this login button. I used margin-top to keep the button slightly down from the top.

```html
<button>Log In</button>
```
```css
button{
  width: 100%;
  margin-top: 35px;
  padding: 12px;
  background: #dde1e7;
  border: none;
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 32px;
 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);
}
```
![Create a login button in the popup login form](https://1.bp.blogspot.com/-czDKtIe6CDs/YUY0qQv1Z3I/AAAAAAAABpA/5BuSuvxPjHkcCaDM2x0zwLgav6nQvUZAwCLcBGAsYHQ/s16000/Screenshot%2B%2528630%2529%2B%25286%2529.jpg)
This is the easiest way to create a modal login form. Hope you learned from this tutorial how I created this pop-up login form using HTML and CSS only.

You can visit my blog for more tutorials like this.
https://www.foolishdeveloper.com/