DEV Community

loading...
Cover image for How To Create Pop Up Login Form Using HTML and CSS

How To Create Pop Up Login Form Using HTML and CSS

Sonali Roy
I am Sonali Roy a junior web designer. I share my little knowledge through various community platforms.
・2 min read

Hello friends, today I am going to show you how to create a pop-up login form using only HTML and CSS code.

I created this login page in the form of a neomorphic design. Like the normal login form, it has everything here i.e. a place to input the email ID and password for login. There is also a login button below.

In this program, at first, on the webpage, there is a white button with "Sign In" text. And when you click on that button then the Popup or Modal Login Form will be displayed.

You can copy the codes from the given boxes or download the code files from the given link.

HTML Code:

<div class="popup" id="popup-1">
   <div class="content">
    <div class="close-btn" onclick="togglePopup()">
     ×</div>

<h1>Sign in</h1> 
  <div class="input-field"><input placeholder="Email" class="validate"></div>
  <div class="input-field"><input placeholder="Password" class="validate"></div>
    <button class="second-button">Sign in</button>
    <p>Don't have an account? <a href="/signup.html">Sign Up</a></p>


   </div>
  </div>
  <button onclick="togglePopup()" class="first-button">Sign In</button>

Enter fullscreen mode Exit fullscreen mode

CSS Code:

 body {
  background: #262626;
  font-family: raleway;
  color: white;
  margin: 0;
}

.popup .content {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-150%) scale(0);
 width: 300px;
 height: 450px;
 z-index: 2;
 text-align: center;
 padding: 20px;
 border-radius: 20px;
 background: #262626;
 box-shadow:  38px 38px 56px #1e1e1e, 
             -25px -25px 38px #1e1e1e;
 z-index: 1;
}

.popup .close-btn {
 position: absolute;
 right: 20px;
 top: 20px;
 width: 30px;
 height: 30px;
 color: white;
 font-size: 30px;
 border-radius: 50%;
 padding: 2px 5px 7px 5px;
 background: #292929;
 box-shadow:  5px 5px 15px #1e1e1e, 
             -5px -5px 15px #1e1e1e;
 }

.popup.active .content {
transition: all 300ms ease-in-out;
transform: translate(-50%,-50%) scale(1);
}

h1 {
 text-align: center;
 font-size: 32px;
 font-weight: 600;
 padding-top: 20px;
 padding-bottom: 10px;
}

a {
 font-weight: 600;
 color: white;
}

.input-field .validate {
padding: 20px;
font-size: 16px;
border-radius: 10px;
border: none;
margin-bottom: 15px;
color: #bfc0c0;
background: #262626;
box-shadow: inset 5px 5px 5px #232323, 
            inset -5px -5px 5px #292929;
outline: none;
}

.first-button {
color: white;
font-size: 18px;
font-weight: 500;
padding: 30px 50px;
border-radius: 40px;
border: none;
position: absolute;
top: 50%;
left: 20%;
transform: translate(-50%, -50%);
background: #262626;
box-shadow:  18px 18px 25px #1e1e1e, 
             -15px -15px 25px #1e1e1e;
transition: box-shadow .35s ease !important;
outline: none;
}

.first-button:active {  
background: linear-gradient(145deg, #222222, #292929);
box-shadow:  5px 5px 10px #262626, 
             -5px -5px 10px #262626;
border: none;
}

.second-button {
color: white;
font-size: 18px;
font-weight: 500;
margin-top: 20px;
padding: 20px 30px;
border-radius: 40px;
border: none;
background: #262626;
box-shadow:  8px 8px 15px #202020, 
             -8px -8px 15px #2c2c2c;
transition: box-shadow .35s ease !important;
outline: none;
}

.second-button:active{
background: linear-gradient(145deg,#222222, #292929);
box-shadow: 5px 5px 10px #262626, -5px -5px 10px #262626;
border: none;
outline: none;
}
p{
color: #bfc0c0;
padding: 20px;
}
Enter fullscreen mode Exit fullscreen mode

JavaScript:


 function togglePopup() {
 document.getElementById("popup-1")
  .classList.toggle("active");
}

Enter fullscreen mode Exit fullscreen mode

Discussion (2)

Collapse
madza profile image
Madza

Love the dark theme 💖🔥

Collapse
kamalhossain profile image
Kamal Hossain

It would be nice if you provide a live view link for this thing...

Forem Open with the Forem app