This content originally appeared on DEV Community and was authored by Sonali Roy
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>
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;
}
JavaScript:
function togglePopup() {
document.getElementById("popup-1")
.classList.toggle("active");
}
This content originally appeared on DEV Community and was authored by Sonali Roy
Sonali Roy | Sciencx (2021-05-12T15:34:39+00:00) How To Create Pop Up Login Form Using HTML and CSS. Retrieved from https://www.scien.cx/2021/05/12/how-to-create-pop-up-login-form-using-html-and-css/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.