In this article, you will learn how to create a Simple Popup Login Form using HTML and CSS. We use many types of login forms. Popup Login Form is one of them.
Currently, this design is used in almost all websites. As a result of using this design, the login form is completely hidden. Instead, a small button or link is available. After clicking on that button, the complete login form can be seen.
Popup Login Form helps to save space in the website and increase the quality. Many people use jQuery or JavaScript to create this (modal login form HTML CSS). However, if you want, you can only create with the help of HTML and CSS. Here I used the check box to activate the popup.
Popup Login Form HTML CSS
In the case of this modal popup login form, only one button is normally visible. When you click on that button, you will see the whole box. This box contains all the information such as heading, username and password input space, a login button, and a cancel button.
The Cancel button will help to hide this Simple Popup Login Form again. I first used a heading in the login form which is basically for beauty. Then created two boxes to input username and password. I took the help of HTML’s input function to create an input box. Then at the end, I created a login button.
See the Pen Untitled by Code Media (@codemediaweb) on CodePen.
Hope the above demo has helped you to know how this project (popup login form HTML CSS) works. You must have a basic idea about HTML CSS to make it. Below we have shared step-by-step tutorials for you.
However, many people only want the source code. So I gave a button below the article to download the source code. You can easily download the source code needed to create this beautiful simple pop-up login form.
1. Design the webpage
I designed the webpage and created an area using the following HTML and CSS codes. This area will have a popup button and a login form. Here the background color of the web page is blue.
2. Create a popup button
Now I have created a button on the home page. Click on this button to see the login form. The button is width: 160px, height: 50px and the background color is white.
Then I made a hover effect in the text inside this button. When you hover or click the mouse over a button, the text will change color below it.
3. Basic structure of popup login form
Now I have created a box for the login form. All the information can be found in this box. Here I have used opacity: 0, visibility: hidden which will keep the box completely hidden. Box width: 330px and height will depend on the amount of content.
Now I have implemented the popup system. With the help of the following code, we have made a connection between the button on the homepage and the login form. This indicates that opacity: 1, visibility: visible when you click on the popup button. That means the login form can be seen.
The Cancel button will be executed using this same code. Because in both cases I used “for =”click “”. As a result, using this code, the popup button and cancel button in the login form will be effective.
4. Create headings in the login form
Now I have added a heading in the login form. These headings were originally used to enhance beauty. I have used font-size: 30px to increase the size of the heading. text-align: center is used to place the heading in the middle of the box.
5. Cancel button of Popup Login Form
Now the cancel button has been created. This button will help hide the box. When you click on the button, the Popup Login Form will be hidden.
6. Place to input and login button
Now the input space has been created. First we created an area using HTML form (<form> </form). In between, I will create two boxes for input and a button for login.
Input username and password:
We have created two places to input email id and passwords using the HTML below. I have used a text for each one that will indicate which item to input in which box.
Those boxes will be width: 100%, which is equal to the length of the login form. With height: 43px and a border used.
Login button:
A login button has been created using the following codes. The button’s background color is blue and the text color is white. The hover color has been used in the button.
Hopefully from the above article, you have learned how I created a Simple Popup Login Form using HTML and CSS. Below is the download button that allows you to download the source code needed to create this modal popup form.