Hello readers, Hope you are doing good. Today in this blog you’ll learn how can create Popup Login Form With Input Required Feilds using Html And CSS Only.
[Required fields] means - you can't login without filling both input's text and password given fields. Guys you may be noticed like this kind of popup login or registration form button in header's nav bar or toggle side bar when you visited many of different websites or webpage and when you pressed that button a popup form would shown like this type of in the center of whole screen.

So, We decided to bring a content like this type to you for learn something new and as our other post we have also bring this one for you with easy way without using any javascript or jquery code instead for animate as pop-up we just done this one only using of Html's label and input's "checkbox" typed arritbute. May hope to all that you will be loved & enjoyed our this blog.

We have also linked a video tutorial which has given below for you. Where we have shown you to create this rating page using javascript in very simple and easey steps and we hope to all of you that given tutorial may be cleared your whole doubts.

Watch Tutorial of Create Popup Login Form Using HTML And CSS

And for your more clearance, we attached a download source code file link in the last of this post also just scroll down and download it now to more practice. Don't worry guys, Given Source-Code is almost free of cost.

Don't worry, We always go to learn web development codes to you by taking simple and easy steps. And we are 100% sure about our codes which is always too simple & clear to understand and helps you learn something new through every blog's post.

Hope you might like these posts

Image Color Overlay effect

Night mode toggle checkbox

Background Color Filled List Items

Now with this video, I'm sure you have understood the basics behind creating this program for those of you still finding it difficult I'll be linking the source code in the description for you.

HTML CODE:

  <!DOCTYPE html>
  <html lang="en">
  <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"/>
     <link rel="stylesheet" href="style.css">
     <title>Popop Login Form | Html And CSS</title>
  </head>
  <body>
     <input type="checkbox" id="check">
     <label for="check" class="popupbtn">Login Here</label>
     <div class="container">
        <label for="check">
           <i class="fa fa-times"></i>
        </label>
        <h2>Login</h2>
        <form action="">
           <label for="user">User name</label><br>
           <input type="text" id="user" required><br>
           <label for="pw">Password</label><br>
           <input type="password" id="pw" required><br>
           <a href="#" class="forgetpw">Forget password</a><br>
           <button>
              <i class="fa fa-send"></i>
              <input type="submit" value="send" id="btn">
           </button>
           <div class="signup">
              Not a member? <a href="#">Signup</a>
           </div>
        </form>
     </div>
  </body>
  </html>

CSS CODE:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;800&display=swap');
*{
   margin: 0;
   padding: 0;
   outline: none;
   box-sizing: border-box;
   font-family: 'Poppins', sans-serif;
}
body{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   background-color: #71C562;
}
.container{
   background: #fff;
   padding: 20px 30px;
   border-radius: 7px;
   box-shadow: 0 5px 15px rgba(0,0,0,0.5);
   transition: 0.3s 0.5s ease-in;
   transform: scale(0);
}
.container h2{
   position: relative;
   font-size: 40px;
   font-weight: 800;
   padding: 20px 0;
   color: #222;
   text-align: center;
   letter-spacing: 2px;
}
.container h2::after{
   position: absolute;
   content: '';
   height: 2px;
   width: 100%;
   background-color: #c0c0c0;
   left: 0;
   bottom: -10px;
}
.container label .fa-times{
   position: absolute;
   right: 25px;
   top: 25px;
   font-size: 25px;
   color: #71C562;
   cursor: pointer;
   z-index: 1;
}
.container label .fa-times:active{
   transform: rotate(720deg);
   transition: 1s ease;
}
.container form{
   margin: 30px 0;
}
.container form label{
   position: relative;
   font-size: 25px;
   letter-spacing: 0.5px;
   color: #222;
}
.container form label::after{
   position: absolute;
   content: '*';
   color: crimson;
}
input[type="text"],
input[type="password"]{
   width: 350px;
   height: 50px;
   border: 1px solid #c0c0c0;
   padding: 0 20px;
   font-size: 18px;
   border-radius: 25px;
   transition: 0.3s ease-in;
}
input[type="text"]:focus,
input[type="password"]:focus{
   border: 3px solid #71C562;
   color: #71C562;
}
.container form #user{
   margin-bottom: 10px;
}
.container form .forgetpw{
   display: block;
   margin: 3px 0;
   font-size: 18px;
   text-decoration: none;
   color: #696969;
}
.container form .forgetpw:hover{
   text-decoration: underline;
   color: #71C562;
}
.container form button{
   position: relative;
   width: 100%;
   padding: 10px 0;
   border: none;
   border-radius: 25px;
   background-color: #71C562;
   box-shadow: 0 3px 10px rgba(0,0,0,0.3);
}
.container form button .fa-send{
   color: #fff;
   font-size: 20px;
}
.container form button:active{
   transform: scale(0.98);
}
.container form button #btn{
   background-color: transparent;
   border: none;
   margin-left: 5px;
   font-size: 22px;
   color: #fff;
   font-weight: 400;
}
.container form .signup{
   width: 100%;
   padding: 3px 0;
   font-size: 20px;
   margin-top: 20px;
   font-weight: 400;
}
.container form .signup a{
   color: #71C562;
}
input[type="checkbox"]{
   display: none;
}
.popupbtn{
   position: absolute;
   width: 300px;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   font-size: 40px;
   font-weight: 800;
   text-align: center;
   letter-spacing: 1px;
   color: #fff;
   padding: 10px 20px;
   background-color: #000;
   border-radius: 7px;
   cursor: pointer;
   overflow: hidden;
   box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}
.popupbtn::after{
   position: absolute;
   content: '';
   width: 100%;
   height: 90%;
   background-color: rgba(254,254,254,0.2);
   left: 0;
   top: 0;
   border-radius: 7px;
   z-index: -1;
}
.popupbtn:active{
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%) scale(.98);
   transition: 0.3s ease;
}
#check:checked ~ .container{
   transform: scale(1);
}

How To Create Popup Login Form Using HTML And CSS (WebKitCoding)

Watch Tutorial of Create Popup Login Form Using HTML And CSS

Post a Comment

Post a Comment

How To Create Responsive Navigation Menu Bar With Search Box Using Html And CSS - WebKitCoding