Popup Login Form Design in HTML & CSS
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.
As you have seen on many websites there is a dialog box that is based on JavaScript or JavaScript library. But today I’ll share with you this program (Popup or Modal Login Form) using only HTML & CSS. In this program, at first, on the webpage, there is a white button with “View Form” text. And when you click on that button then the Popup or Modal Login Form will be displayed.
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
As you have seen the pure CSS Modal or Popup Login Form Design in the video. This form is very simple and easy to create. If you are a beginner and you know HTML & CSS then you can also create this type of Modal or Popup Login Form. But if you know JavaScript then you can add advanced features in this form and take this program at the next level.
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.
Originally published at https://www.codingnepalweb.com on July 1, 2020.
