Login & Signup Popup Form with Animation | HTML CSS JavaScript Tutorial
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Login & Signup Popup</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="center-btn">
<button class="open-modal-btn">Login / Signup</button>
</div>
<div class="modal-container" id="authModal">
<div class="modal">
<span class="close-btn" id="closeBtn">×</span>
<div class="forms-wrapper">
<div class="form-container login-container">
<h2>Welcome Back</h2>
<div class='code-block code-block-2' style='margin: 8px 0; clear: both;'>
<template id="l60DyoteqH8aAs4A8n0C"></template>
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-2094722033678002"
data-ad-slot="2248279416"></ins>
<script type="bv_inline_delayed_js" bv_unique_id="M9d7yICqdjLdFmd6pLOg" defer="1" data-cfasync="" bv_inline_delayed="1" async="">(adsbygoogle = window.adsbygoogle || []).push({});</script></div>
<p>Please login to continue</p>
<form>
<input type="email" placeholder="Email" required />
<input type="password" placeholder="Password" required />
<button type="submit" class="btn-primary">Login</button>
</form>
<div class="social-login">
<div class="tooltip">
<a href="#" class="social google">
<svg viewBox="0 0 24 24"><path fill="#fff" d="M21.35 11.1h-9.18v2.92h5.28c-.23 1.26-.94 2.32-2 3.02v2.5h3.24c1.9-1.75 2.99-4.33 2.99-7.44 0-.5-.04-.98-.1-1.46z"/><path fill="#fff" d="M12.17 22c2.7 0 4.97-.9 6.63-2.45l-3.24-2.5c-.9.6-2.05.95-3.39.95-2.6 0-4.81-1.75-5.6-4.1H3.17v2.58C4.83 19.33 8.27 22 12.17 22z"/><path fill="#fff" d="M6.57 13.9c-.2-.6-.31-1.23-.31-1.9s.11-1.3.31-1.9V7.52H3.17C2.42 9.1 2 10.98 2 13s.42 3.9 1.17 5.48l3.4-2.58z"/><path fill="#fff" d="M12.17 5.88c1.47 0 2.79.51 3.83 1.51l2.86-2.86C16.98 2.78 14.71 2 12.17 2 8.27 2 4.83 4.67 3.17 8.1l3.4 2.58c.79-2.35 3-4.1 5.6-4.1z"/></svg>
</a>
<span class="tooltiptext">Login with Google</span>
</div>
<div class="tooltip">
<a href="#" class="social facebook">
<svg viewBox="0 0 24 24"><path fill="#fff" d="M22 12a10 10 0 1 0-11.5 9.9v-7h-2.2v-2.9h2.2V9.8c0-2.2 1.3-3.5 3.3-3.5.96 0 1.9.17 1.9.17v2.1h-1.1c-1.1 0-1.4.7-1.4 1.3v1.6h2.5l-.4 2.9h-2.1v7A10 10 0 0 0 22 12z"/></svg>
</a>
<span class="tooltiptext">Login with Facebook</span>
</div>
<div class="tooltip">
<a href="#" class="social linkedin">
<svg viewBox="0 0 24 24"><path fill="#fff" d="M19 3A2 2 0 0 1 21 5V19A2 2 0 0 1 19 21H5A2 2 0 0 1 3 19V5A2 2 0 0 1 5 3H19M8.34 17.34V10.66H5.67V17.34H8.34M7 9.34A1.67 1.67 0 1 0 7 6A1.67 1.67 0 0 0 7 9.34M18.34 17.34V13.67C18.34 11.34 17 10 14.67 10C13.67 10 12.67 10.67 12.34 11.34H12.33V10.66H9.67V17.34H12.33V14.34C12.33 13.67 12.67 13 13.67 13C14.67 13 15 13.67 15 14.34V17.34H18.34Z"/></svg>
</a>
<span class="tooltiptext">Login with LinkedIn</span>
</div>
</div>
<p class="switch-form">Don't have an account? <span id="toSignup">Signup</span></p>
</div>
<div class="form-container signup-container">
<h2>Create Account</h2>
<p>Join us today!</p>
<form>
<input type="text" placeholder="Full Name" required />
<input type="email" placeholder="Email" required />
<input type="password" placeholder="Password" required />
<button type="submit" class="btn-primary">Signup</button>
</form>
<div class="social-login">
<div class="tooltip">
<a href="#" class="social google">
<svg viewBox="0 0 24 24"><path fill="#fff" d="M21.35 11.1h-9.18v2.92h5.28c-.23 1.26-.94 2.32-2 3.02v2.5h3.24c1.9-1.75 2.99-4.33 2.99-7.44 0-.5-.04-.98-.1-1.46z"/><path fill="#fff" d="M12.17 22c2.7 0 4.97-.9 6.63-2.45l-3.24-2.5c-.9.6-2.05.95-3.39.95-2.6 0-4.81-1.75-5.6-4.1H3.17v2.58C4.83 19.33 8.27 22 12.17 22z"/><path fill="#fff" d="M6.57 13.9c-.2-.6-.31-1.23-.31-1.9s.11-1.3.31-1.9V7.52H3.17C2.42 9.1 2 10.98 2 13s.42 3.9 1.17 5.48l3.4-2.58z"/><path fill="#fff" d="M12.17 5.88c1.47 0 2.79.51 3.83 1.51l2.86-2.86C16.98 2.78 14.71 2 12.17 2 8.27 2 4.83 4.67 3.17 8.1l3.4 2.58c.79-2.35 3-4.1 5.6-4.1z"/></svg>
</a>
<span class="tooltiptext">Login with Google</span>
</div>
<div class="tooltip">
<a href="#" class="social facebook">
<svg viewBox="0 0 24 24"><path fill="#fff" d="M22 12a10 10 0 1 0-11.5 9.9v-7h-2.2v-2.9h2.2V9.8c0-2.2 1.3-3.5 3.3-3.5.96 0 1.9.17 1.9.17v2.1h-1.1c-1.1 0-1.4.7-1.4 1.3v1.6h2.5l-.4 2.9h-2.1v7A10 10 0 0 0 22 12z"/></svg>
</a>
<span class="tooltiptext">Login with Facebook</span>
</div>
<div class="tooltip">
<a href="#" class="social linkedin">
<svg viewBox="0 0 24 24"><path fill="#fff" d="M19 3A2 2 0 0 1 21 5V19A2 2 0 0 1 19 21H5A2 2 0 0 1 3 19V5A2 2 0 0 1 5 3H19M8.34 17.34V10.66H5.67V17.34H8.34M7 9.34A1.67 1.67 0 1 0 7 6A1.67 1.67 0 0 0 7 9.34M18.34 17.34V13.67C18.34 11.34 17 10 14.67 10C13.67 10 12.67 10.67 12.34 11.34H12.33V10.66H9.67V17.34H12.33V14.34C12.33 13.67 12.67 13 13.67 13C14.67 13 15 13.67 15 14.34V17.34H18.34Z"/></svg>
</a>
<span class="tooltiptext">Login with LinkedIn</span>
</div>
</div>
<p class="switch-form">Already have an account? <span id="toLogin">Login</span></p>
</div>
</div>
</div>
</div>
<template id="x8XOJoQ87uVCVYBou2Lt"></template>
</body>
</html>
CSS
/* ---------- Base Reset ---------- */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Segoe UI", sans-serif;
background: #f8f8f8;
color: #333;
}
/* ---------- Button to Open Modal ---------- */
.center-btn {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.social svg {
width: 24px;
height: 24px;
}
.close-btn {
z-index: 2;
background: #fff;
border-radius: 50%;
width: 32px;
height: 32px;
text-align: center;
line-height: 32px;
font-size: 1.6rem;
font-weight: bold;
cursor: pointer;
}
.open-modal-btn {
background: #e60023;
color: #fff;
border: none;
padding: 12px 22px;
border-radius: 6px;
cursor: pointer;
font-size: 1rem;
margin: 30px;
transition: background 0.3s ease;
}
.open-modal-btn:hover {
background: #cc001f;
}
/* ---------- Modal Overlay ---------- */
.modal-container {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.55);
display: none;
justify-content: center;
align-items: center;
z-index: 1000;
}
/* ---------- Modal Box ---------- */
.modal {
background: #fff;
border-radius: 12px;
overflow: hidden;
width: 95%;
max-width: 400px;
box-shadow: 0 8px 30px rgba(0,0,0,0.2);
animation: bounceIn 0.5s ease forwards;
position: relative;
}
/* Close Button */
.close-btn {
position: absolute;
right: 14px;
top: 12px;
font-size: 1.8rem;
color: #888;
cursor: pointer;
transition: color 0.3s ease;
}
.close-btn:hover {
color: #000;
}
/* ---------- Forms Wrapper ---------- */
.forms-wrapper {
display: flex;
width: 200%;
transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.form-container {
width: 50%;
padding: 40px 30px;
text-align: center;
}
.form-container h2 {
color: #e60023;
margin-bottom: 6px;
}
.form-container p {
color: #666;
margin-bottom: 20px;
font-size: 0.9rem;
}
.form-container form {
display: flex;
flex-direction: column;
gap: 14px;
}
.form-container input {
padding: 12px;
border-radius: 6px;
border: 1px solid #ddd;
outline: none;
font-size: 0.95rem;
transition: border 0.3s ease;
}
.form-container input:focus {
border-color: #e60023;
}
/* ---------- Primary Button ---------- */
.btn-primary {
background: #e60023;
color: white;
padding: 12px;
font-size: 1rem;
border: none;
border-radius: 6px;
cursor: pointer;
transition: background 0.3s ease, transform 0.2s ease;
}
.btn-primary:hover {
background: #cc001f;
transform: translateY(-2px);
}
/* ---------- Social Login Buttons ---------- */
.social-login {
display: flex;
justify-content: center;
gap: 12px;
margin: 20px 0;
}
.social {
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: transform 0.3s ease;
}
.social svg {
width: 20px;
height: 20px;
}
.social:hover {
transform: scale(1.1);
}
.google { background: #db4437; }
.facebook { background: #3b5998; }
.linkedin { background: #0077b5; }
/* ---------- Tooltip ---------- */
.tooltip {
position: relative;
display: inline-block;
}
.tooltiptext {
visibility: hidden;
background: #333;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 6px 10px;
position: absolute;
z-index: 1;
bottom: 130%;
left: 50%;
transform: translateX(-50%);
opacity: 0;
transition: opacity 0.3s ease;
font-size: 0.75rem;
white-space: nowrap;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
/* ---------- Switch Form Link ---------- */
.switch-form {
font-size: 0.85rem;
color: #444;
}
.switch-form span {
color: #e60023;
font-weight: bold;
cursor: pointer;
}
/* ---------- Animations ---------- */
@keyframes bounceIn {
0% { transform: scale(0.7); opacity: 0; }
60% { transform: scale(1.05); opacity: 1; }
80% { transform: scale(0.95); }
100% { transform: scale(1); }
}
/* ---------- Mobile Responsive ---------- */
@media (max-width: 480px) {
.form-container {
padding: 25px 20px;
}
.social-login {
gap: 8px;
}
}
JavaScript
document.querySelector(".open-modal-btn").addEventListener("click", () => {
document.getElementById("authModal").style.display = "flex";
});
document.getElementById("closeBtn").addEventListener("click", () => {
document.getElementById("authModal").style.display = "none";
});
window.addEventListener("click", (e) => {
if (e.target === document.getElementById("authModal")) {
document.getElementById("authModal").style.display = "none";
}
});
document.getElementById("toSignup").addEventListener("click", () => {
document.querySelector(".forms-wrapper").style.transform = "translateX(-50%)";
});
document.getElementById("toLogin").addEventListener("click", () => {
document.querySelector(".forms-wrapper").style.transform = "translateX(0%)";
});