PopUp Login Form with HTML and CSS

In this article, we will learn how to create a Popup Login Form using only HTML & CSS. Earlier in this blog, I have shared a couple of simple Login form, but here in this blog, I am going to create a nice-looking Popup animation. Apart from this, I have shared many CSS animation examples in my blog. Please make sure to check those as well.

HTML forms are required to collect different kinds of user data inputs, such as contact information like name, email address, phone numbers and credit card information, etc.

Below is the video tutorials. watch and practices.

Login form design is an essential part of web design because it allows the website owner to collect some information about their visitors, and it helps to communicate with them. Its also increase the trust level among the visitor about the website they are visiting.

Popup refers to a graphical user interface show place which could seem as a window in exceptional sizes and screen positions on web sites’ visual interface, typically without the website visitor’s permission. They pop up on the display screen; that is why they're referred to as “popups.”

A popup can are available different sorts, together with full-display, sidebar, and banner.

Forms contain unique factors known as controls like inputbox, checkboxes, radio-buttons, submit buttons, and so on. Customers normally complete a form through enhancing its controls e.g. Entering textual content, choosing gadgets, and so forth. and submitting this form to a web server for further processing.

Input Element

That is the most typically used element inside HTML forms.
It allows you to specify diverse types of user enter fields, depending on the type attribute. An input detail can be of kind text area, password area, checkbox, radio button, submit button, reset button, record choose container, as well as several new enter types brought in HTML.I have used input type in this project as a text, password and Submit. The submit button is used to send the form data to a web server.

Source Code:

If you like this Popup login Form, then feel free to use it in your project. Copy the code by clicking on Copy button provided below.

First, you have to create two files. One of them is HTML, and the other is CSS. after creating the files, paste the code provided below.

HTML CODE:

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Popup Form | By Code Info</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <input type="checkbox" id="show">
    <label for="show" class="show-btn">View Form</label>

    <div class="container">
        <label for="show" class="close-btn" title="close">×</label>
        <h1>Welcome</h1>
        <form action="#">
            <label>Email or Phone</label>
            <input type="text">
            <label>Password</label>
            <input type="password">
            <a href="#">Forgot Password?</a>
            <button>Submit</button>
            <div class="link">Not a member? <a href="#">Sigup here</a></div>
            
        </form>
    </div>
</body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you have to create a file with .css extension.

CSS CODE:

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');

body{
  font-family: 'Poppins', sans-serif;
  background: linear-gradient(to right, #20002c,
 #cbb4d4);
}
.show-btn{
    padding: 10px 20px;
    font-size: 20px;
    font-weight: 500;
    color: white;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.25);
}

.show-btn{
    position: absolute;
    top: 45%;
    left: 30%;
    transform: translate(-50%, -50%);
}

input[type="checkbox"]{
    display: none;
}

#show:checked ~ .container{
    display: block;
}

.container{
    display: none;
    width: 350px;
    padding: 20px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.18);

}
.container{
    position: absolute;
    top: 50%;
    left: 60%;
    transform: translate(-50%, -50%)
}
.container .close-btn{
    position: absolute;
    right: 20px;
    top: 15px;
    font-size: 25px;
    cursor: pointer;
}

.close-btn:hover{
    color: red;
}

h1{
    text-align: center;
    color: white;
    text-transform: uppercase;
}

form{
    margin: 20px;
}
label{
    display: block;
    color: white;
    font-size: 18px;
    margin-top: 10px;
}

input{
    display: block;
    width: 90%;
    background: transparent;
    border: none;
    outline: none;
    border-bottom: 1px solid white;
    padding: 10px;
    color: white;
}

button{
    display: block;
    width: 95%;
    padding: 8px;
    border: none;
    outline: none;
    background: linear-gradient(to right, #cbb4d4, 
    #20002c);
    color: white;
    font-size: 18px;
    cursor: pointer;
    margin-top: 20px;

}

a{
    text-decoration: none;
    color: #20002c;

}

.link{
    margin-top: 30px;
    text-align: center;
    color:white;
}

a:hover{
    text-decoration: underline;
}

I hope you liked this snippet. If so, please share the blog and follow us in our social media profiles and stay connected with this blog. Thank you for stopping by.

You may like this:

Input Element

Source Code:

2 Comments

Post a Comment

About Us

Contact Form