Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

css
communitycreator

How to make a pure CSS popup

Behzad Ahmad

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

HTML code for the popup form

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

CSS code for the popup form

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

Final Output

Explanation

Since we combined the HTML (i.e., Step 1) and CSS (i.e., Step 2) parts of the code, we’ll get a popup screen once we click on the “Login” button in the above-given output.

RELATED TAGS

css
communitycreator
RELATED COURSES

View all Courses

Keep Exploring