Hello readers, Today in this blog you’ll learn how to create a Popup Login Form Design using only HTML & CSS. Earlier I have shared many blogs on how to create Login Form Design with Password Show Hide Toggle Button. And, now I’m going to create a Modal Login Form using only HTML & CSS.
Popup boxes (or dialog boxes) are modal windows used to inform or alert the user, or to get input from the user. Popup boxes restrict the user from accessing other features of a program until the popup is closed, so they should not be overused.
If you’re feeling difficulty to understand what I am saying. You can watch a full video tutorial on this program (Popup or Modal Login Form).
Video Tutorial of Modal or Popup Login Form Design
If you like this program (Popup or Modal Login Form) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down. You can use this Modal or Popup Login Form on your websites, projects, and HTML pages.
Modal or Popup Login Form Design [Source Codes]
As always before, sharing the codes of this program (Popup or Modal Login Form). Let’s few talk about the main tags and codes of this program. At first, in the HTML File, I created a <div> with the class name “container” and inside this tag, I created a <form>. Inside <form> I created two <input> tags one for Email and another one for Password. Similarly I created <label> and some <div> and <a> anchor tags. In the label tag, I put the Email and Password text, and <a> tags are created for forgot password link and signup link. At last, Inside the same <form> tag, I created another <div> with the class name and placed two tags inside it (<div> and <button>).
In the CSS File, First I placed all elements at the center and set a gradient background. Then I created a white form container of particular height-width. After that, I did styling to inputs like I gave height-width, margin-padding, etc. Similarly, I did styling to forgot password link like on hover I gave text-decoration: underline. Then I created a gradient background-color button and I change the position of gradient background-color on hover. After that, I placed the signup-link at the center and change the color of the link and hide the underline of the link. And I only show the underline of link on hover. At last, I hide the form with giving display: none.
After styling to all form elements, I created an <label> in the HTML File inside this tag, I gave a font-awesome icon class name. And did styling to this icon and placed it to the right top corner of the form. Then I created another <label> outside container with the “View Form”. I created this tag as a button. After that, I gave the height width to the label. At last, I created <input> type checkbox and gave a “show” to the id. Then I put the id name of <input> to all for attribute of <label>. After all, I changed the display: none; value to display: block; of the form on button click.
You can also download the source code files through the given link. Click here to download source code files.