How to make a pure CSS popup

To create a popup in CSS, we follow the three main steps:

Step 1: Add HTML

To make the popup, we first have to create a form. Then, we add input fields and a submit button.

Code

Explanation

• Lines 3–5: We make a button div named Login.

• Lines 6–9: We make another div that prints Login.

• Lines 12–22: We make a form that accepts a name and the password. It has the login button at the end.

Step 2: Add CSS

Next, let’s create the styling for our popup and form.

Code

Explanation

• Lines 1–6: We have set the properties of the body including the font style and background color.

• Lines 7–13: We set the position of the content to be in the center.

• Lines 14–25: We set the properties of button.

• Lines 26–29: We set the properties of click.

• Lines 30–33: We set the color of hover.

• Lines 34–43: We set the properties of the content written.

• Lines 44–56: We set the properties of the popup message.

• Lines 62–69: We set the properties of the text.

• Lines 70–73: We set the border of form.

• Lines 74–80: We set the properties of label.

• Lines 81–94: We set the properties of input obtained in the form.

• Lines 95–110: We set the properties of placeholder and the login button.

Step 3: Combine HTML and CSS

We now combine the HTML and CSS files to connect the popup form and its styling.

Code