DEV Community

Cover image for Popup Login Form Design using only HTML & CSS
Shantanu Jana
Shantanu Jana

Posted on

Popup Login Form Design using only HTML & CSS

#html #css #webdev #beginners

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 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.



body{
  margin:0;
  padding:0;
  font-family:sans-serif;
  background: #dde1e7;
  min-height: 100vh;
}
Enter fullscreen mode Exit fullscreen mode

Design the web page
I added the login form and the popup button between the div below.



<div class="center">

   <!-- Home page button -->


   <!-- Popup login form -->

</div>
Enter fullscreen mode Exit fullscreen mode

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.



<input type="checkbox" id="click">
    <label for="click" class="click-me">Login Form</label>
Enter fullscreen mode Exit fullscreen mode 


#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);
}
Enter fullscreen mode Exit fullscreen mode

Create a popup button on the web page

Now I have added the hover effect. When you click on that button, you will see some changes here.



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

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.



<div class="content">

</div>
Enter fullscreen mode Exit fullscreen mode 


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

}
Enter fullscreen mode Exit fullscreen mode 


.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);
}
Enter fullscreen mode Exit fullscreen mode

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 1which means this login form will appear when you click on the home page button.



#click:checked~.content{
  opacity:1;
  visibility:visible;
}
Enter fullscreen mode Exit fullscreen mode

Create the basic structure of the login form

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.



<div class="text"> LOGIN </div>
Enter fullscreen mode Exit fullscreen mode 


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

Add titles to the login form

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.



 <label for="click" id="times">x</label>
Enter fullscreen mode Exit fullscreen mode 


#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;
}
Enter fullscreen mode Exit fullscreen mode

Create a cancel button

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. 



<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>
Enter fullscreen mode Exit fullscreen mode

I have designed the levels with the help of CSS below.



form{
  margin-top: 40px;

}
label{
    display: block;
    margin-top: 30px;
    font-size: 16px;
    font-weight: 500;
}
Enter fullscreen mode Exit fullscreen mode

I have designed the input spaces using these codes.



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;
}
Enter fullscreen mode Exit fullscreen mode

Create a place to input emails and passwords

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.



<button>Log In</button>
Enter fullscreen mode Exit fullscreen mode 


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);
}
Enter fullscreen mode Exit fullscreen mode

Create a login button in the popup login form
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/

Top comments (4)

Collapse
 
obaino82 profile image
Obaino82 •

Nice work

Collapse
 
shantanu_jana profile image
Shantanu Jana •

Thank you

Collapse
 
lethiwe profile image
Dev-Lethiwe •

This was explained well and it's very neat. I just tried it out myself. Thank you Shantanu

Collapse
 
shantanu_jana profile image
Shantanu Jana •

Welcome 😃

Read next

mikeyoung44 profile image

Robust Interpretable Reasoning via Neurosymbolic Program Synthesis

Mike Young -

michelledey4you profile image

Created a Npm package for Vite, React Tailwindcss starter code with configuration.

Plain -

joshuaamaju profile image

The Right Way to Add Images to Emails in Next.JS

Joshua Amaju -

substrsensei profile image

Cheat Sheet: Enabling HTTPS on a Fresh Laravel Sail App with MacOS

Allan -