Modern Login & Signup Form with Social Buttons | HTML CSS JS
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 Form | Learn with Arshyan</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
</head>
<body>
<div class="form-container">
<div class="form-box" id="loginForm">
<h2>Login</h2>
<form>
<input type="email" placeholder="Email" required>
<input type="password" placeholder="Password" required>
<a href="#" class="forgot">Forgot password?</a>
<button type="submit" class="btn">Login</button>
<div class="social-login">
<button type="button" class="social-btn facebook">
<i class="fab fa-facebook-f"></i> Login with Facebook
</button>
<button type="button" class="social-btn google">
<i class="fab fa-google"></i> Login with Google
</button>
</div>
<div class='code-block code-block-2' style='margin: 8px 0; clear: both;'>
<template id="IRlNSuEDIjPVZYT6anqM"></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="SnA2PIXpOTrwXTliKCDt" defer="1" data-cfasync="" bv_inline_delayed="1" async="">(adsbygoogle = window.adsbygoogle || []).push({});</script></div>
<p class="switch-text">
Don’t have an account? <a href="#" onclick="showSignup()">Sign up here</a>
</p>
</form>
</div>
<div class="form-box hidden" id="signupForm">
<h2>Signup</h2>
<form>
<input type="text" placeholder="Name" required>
<input type="email" placeholder="Email" required>
<input type="password" placeholder="Password" required>
<input type="password" placeholder="Confirm Password" required>
<button type="submit" class="btn">Signup</button>
<div class="social-login">
<button type="button" class="social-btn facebook">
<i class="fab fa-facebook-f"></i> Signup with Facebook
</button>
<button type="button" class="social-btn google">
<i class="fab fa-google"></i> Signup with Google
</button>
</div>
<p class="switch-text">
Already have an account? <a href="#" onclick="showLogin()">Login here</a>
</p>
</form>
</div>
</div>
<template id="du1mAm0RWLHh39u5p33U"></template>
</body>
</html>
CSS
/* General Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Segoe UI", sans-serif;
}
body {
background: #2563eb; /* blue background */
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
/* Container */
.form-container {
background: #fff;
padding: 30px;
border-radius: 14px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
width: 350px;
}
/* Form Box */
.form-box {
display: block;
}
.form-box.hidden {
display: none;
}
.form-box h2 {
margin-bottom: 20px;
text-align: center;
color: #111;
}
form {
display: flex;
flex-direction: column;
}
form input {
margin: 10px 0;
padding: 12px;
border: 1px solid #ddd;
border-radius: 8px;
font-size: 14px;
}
form input:focus {
border-color: #2563eb;
outline: none;
}
.forgot {
font-size: 12px;
color: #2563eb;
text-decoration: none;
margin-bottom: 12px;
text-align: right;
}
.btn {
background: #2563eb;
color: #fff;
border: none;
padding: 12px;
border-radius: 8px;
cursor: pointer;
margin-bottom: 15px;
font-size: 14px;
}
.btn:hover {
background: #1e40af;
}
/* Social Buttons */
.social-login {
display: flex;
flex-direction: column;
gap: 10px;
}
.social-btn {
padding: 10px;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: 0.3s;
}
.facebook {
background: #1877f2;
color: #fff;
}
.google {
background: #fff;
color: #333;
border: 1px solid #ddd;
}
.google:hover {
background: #f5f5f5;
}
.facebook:hover {
background: #0d5adf;
}
.switch-text {
margin-top: 15px;
font-size: 14px;
text-align: center;
}
.switch-text a {
color: #2563eb;
text-decoration: none;
font-weight: 600;
}
JavaScript
function showSignup() {
document.getElementById("loginForm").classList.add("hidden");
document.getElementById("signupForm").classList.remove("hidden");
}
function showLogin() {
document.getElementById("signupForm").classList.add("hidden");
document.getElementById("loginForm").classList.remove("hidden");
}