• Home
  • Blog
  • HTML & CSS
    • Login Forms
    • Website Designs
    • Navigation Bars
    • Sidebar Menu
    • Card Designs
    • More
      • CSS Buttons
      • Glowing Effects
      • Social Media Buttons
      • Preloader or Loaders
      • Neumorphism Designs
  • JavaScript
    • Form Validation
    • Image Sliders
    • API Projects
    • JavaScript Games
    • Canvas Projects
  • PHP
  • Contact us
Search
CodingNepal CodingNepal
  • Home
  • Blog
    • 9 Easy JavaScript Games for Beginners with Source Code

      9 Easy JavaScript Games for Beginners with Source Code

      10 Best JavaScript Projects with Free Source Code JavaScript Projects for Beginners

      Top 10 JavaScript Projects for Beginners with Source Code

      Top 10 Profile Card Template Designs in HTML & CSS

      Top 10 Profile Card Template Designs in HTML & CSS

      Top 10 Website Templates Design in HTML CSS & JavaScript

      10+ Website Templates Design in HTML CSS and JavaScript

      Top 5 Sidebar Menu Templates in HTML CSS & JavaScript

      Top 15 Sidebar Menu Templates in HTML CSS & JavaScript

  • HTML & CSS
    • Login Forms
    • Website Designs
    • Navigation Bars
    • Sidebar Menu
    • Card Designs
    • More
      • CSS Buttons
      • Glowing Effects
      • Social Media Buttons
      • Preloader or Loaders
      • Neumorphism Designs
  • JavaScript
    • Form Validation
    • Image Sliders
    • API Projects
    • JavaScript Games
    • Canvas Projects
  • PHP
  • Contact us
Home HTML and CSS Popup Login Form Design in HTML & CSS

Popup Login Form Design in HTML & CSS

By
CodingNepal
-
July 1, 2020
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 understanding 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.

You might like this:

  • Responsive Login Form Design 
  • Animated Login Form UI Design
  • Glowing Inputs Login Form Design
  • Multi-Step Form with Step Progress Bar

Modal or Popup Login Form Design [Source Codes]

To create this program (Popup or Modal Login Form). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file. First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title>Popup Login Form Design | CodingNepal</title>
      <link rel="stylesheet" href="style.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
   </head>
   <body>
      <div class="center">
         <input type="checkbox" id="show">
         <label for="show" class="show-btn">View Form</label>
         <div class="container">
            <label for="show" class="close-btn fas fa-times" title="close"></label>
            <div class="text">
               Login Form
            </div>
            <form action="#">
               <div class="data">
                  <label>Email or Phone</label>
                  <input type="text" required>
               </div>
               <div class="data">
                  <label>Password</label>
                  <input type="password" required>
               </div>
               <div class="forgot-pass">
                  <a href="#">Forgot Password?</a>
               </div>
               <div class="btn">
                  <div class="inner"></div>
                  <button type="submit">login</button>
               </div>
               <div class="signup-link">
                  Not a member? <a href="#">Signup now</a>
               </div>
            </form>
         </div>
      </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’ve to create a file with .css extension.

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  outline: none;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  height: 100vh;
  width: 100%;
  background: linear-gradient(115deg, #56d8e4 10%, #9f01ea 90%);
}
.show-btn{
  background: #fff;
  padding: 10px 20px;
  font-size: 20px;
  font-weight: 500;
  color: #3498db;
  cursor: pointer;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}
.show-btn, .container{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

input[type="checkbox"]{
  display: none;
}
.container{
  display: none;
  background: #fff;
  width: 410px;
  padding: 30px;
  box-shadow: 0 0 8px rgba(0,0,0,0.1);
}
#show:checked ~ .container{
  display: block;
}
.container .close-btn{
  position: absolute;
  right: 20px;
  top: 15px;
  font-size: 18px;
  cursor: pointer;
}
.container .close-btn:hover{
  color: #3498db;
}
.container .text{
  font-size: 35px;
  font-weight: 600;
  text-align: center;
}
.container form{
  margin-top: -20px;
}
.container form .data{
  height: 45px;
  width: 100%;
  margin: 40px 0;
}
form .data label{
  font-size: 18px;
}
form .data input{
  height: 100%;
  width: 100%;
  padding-left: 10px;
  font-size: 17px;
  border: 1px solid silver;
}
form .data input:focus{
  border-color: #3498db;
  border-bottom-width: 2px;
}
form .forgot-pass{
  margin-top: -8px;
}
form .forgot-pass a{
  color: #3498db;
  text-decoration: none;
}
form .forgot-pass a:hover{
  text-decoration: underline;
}
form .btn{
  margin: 30px 0;
  height: 45px;
  width: 100%;
  position: relative;
  overflow: hidden;
}
form .btn .inner{
  height: 100%;
  width: 300%;
  position: absolute;
  left: -100%;
  z-index: -1;
  background: -webkit-linear-gradient(right, #56d8e4, #9f01ea, #56d8e4, #9f01ea);
  transition: all 0.4s;
}
form .btn:hover .inner{
  left: 0;
}
form .btn button{
  height: 100%;
  width: 100%;
  background: none;
  border: none;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
}
form .signup-link{
  text-align: center;
}
form .signup-link a{
  color: #3498db;
  text-decoration: none;
}
form .signup-link a:hover{
  text-decoration: underline;
}

That’s all, now you’ve successfully created a Popup Login Form Design in HTML & CSS. If your code doesn’t work or you’ve faced any error/problem then please comment down or contact us from the contact page.

  • TAGS
  • Login Page
  • Modal Dialog Box
  • Popup CSS Login Form
  • Popup Login Form
Share
Facebook
WhatsApp
Twitter
Copy URL
    Previous articleAwesome Pagination Design in HTML & CSS
    Next articleStar Rating System in HTML CSS & JavaScript
    CodingNepal

    RELATED ARTICLESMORE FROM AUTHOR

    Hoverable Sidebar Menu in HTML CSS & JavaScript

    Create Hoverable Sidebar Menu in HTML CSS and JavaScript

    Create A Responsive Custom Website using HTML and CSS

    Create A Responsive Custom Website using HTML and CSS

    How to Implement Form Validation in HTML CSS and JavaScript

    How to Implement Form Validation in HTML CSS and JavaScript

    Recent Posts

    Hoverable Sidebar Menu in HTML CSS & JavaScript

    Create Hoverable Sidebar Menu in HTML CSS and JavaScript

    June 2, 2023
    Create Your Own ChatGPT in HTML, CSS, and JavaScript ChatGPT Clone HTML, CSS, and JavaScript

    How to Create Your Own ChatGPT in HTML CSS and JavaScript

    May 31, 2023
    Create A Responsive Custom Website using HTML and CSS

    Create A Responsive Custom Website using HTML and CSS

    May 30, 2023
    Responsive Personal Portfolio Website in HTML CSS and Bootstrap

    Responsive Personal Portfolio Website in HTML CSS and Bootstrap

    May 28, 2023
    How to Implement Form Validation in HTML CSS and JavaScript

    How to Implement Form Validation in HTML CSS and JavaScript

    May 25, 2023

    Featured Post

    Build An Image Editor in HTML CSS & JavaScript

    Build An Image Editor in HTML CSS & JavaScript

    CodingNepal - July 15, 2022 11

    Categories

    • HTML and CSS213
    • Javascript160
    • JavaScript Projects90
    • Login Form47
    • Card Design42
    • Navigation Bar35
    • Image Slider20
    • CSS Buttons20
    • Website Designs19
    • Sidebar Menu16
    • JavaScript Games15
    • Preloader or Loader15
    • Form Validation14
    • PHP12
    • API Projects11
    CodingNepal
    ABOUT US
    CodingNepal is a blog dedicated to providing valuable and informative content about web development technologies such as HTML, CSS, JavaScript, and PHP... Read more
    FOLLOW US
    • About us
    • Terms & Conditions
    • Privacy policy
    • Contact us
    Copyright © 2023 CodingNepal All Rights Reserved

    AdBlock Detected

    Ad