Glassmorphism Login & Signup Form with Social Buttons
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>Glassmorphism Login & Signup</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="form-container" id="formBox">
<form id="loginForm" class="form active">
<h2 id="formTitle">Login</h2>
<input type="text" placeholder="Username" required />
<input type="password" placeholder="Password" required />
<button type="submit">Sign In</button>
<div class="social-login">
<button type="button" class="google-btn">
<img bv-data-src="https://cdn-icons-png.flaticon.com/512/281/281764.png" class="bv-tag-attr-replace bv-lazyload-tag-img" decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Google"> Google
</button>
<button type="button" class="facebook-btn">
<img bv-data-src="https://cdn-icons-png.flaticon.com/512/733/733547.png" class="bv-tag-attr-replace bv-lazyload-tag-img" decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Facebook"> Facebook
</button>
</div>
<div class='code-block code-block-2' style='margin: 8px 0; clear: both;'>
<template id="XM61RLvVrV7mMEPhZaFb"></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="Szza1Lxjq6VX4hbIhllq" defer="1" data-cfasync="" bv_inline_delayed="1" async="">(adsbygoogle = window.adsbygoogle || []).push({});</script></div>
<p>Don't have an account? <a href="#" id="toggleForm">Sign up</a></p>
</form>
<form id="signupForm" class="form">
<h2 id="formTitle">Signup</h2>
<input type="text" placeholder="Username" required />
<input type="email" placeholder="Email" required />
<input type="password" placeholder="Password" required />
<input type="password" placeholder="Confirm Password" required />
<button type="submit">Sign Up</button>
<div class="social-login">
<button type="button" class="google-btn">
<img bv-data-src="https://cdn-icons-png.flaticon.com/512/281/281764.png" class="bv-tag-attr-replace bv-lazyload-tag-img" decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Google"> Google
</button>
<button type="button" class="facebook-btn">
<img bv-data-src="https://cdn-icons-png.flaticon.com/512/733/733547.png" class="bv-tag-attr-replace bv-lazyload-tag-img" decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Facebook"> Facebook
</button>
</div>
<p>Already have an account? <a href="#" id="toggleFormBack">Login</a></p>
</form>
</div>
<template id="FS3yy2M46BE9pLw63Yu8"></template>
</body>
</html>
CSS
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #2c2c2c;
font-family: Arial, sans-serif;
overflow: hidden;
}
/* Background glowing circles */
.circle {
position: absolute;
border-radius: 50%;
background: radial-gradient(circle, #ff6a00, #ffcc00);
filter: blur(4px);
animation: float 6s ease-in-out infinite alternate;
}
.circle:nth-child(1) {
width: 150px;
height: 150px;
top: 50px;
left: 50px;
}
.circle:nth-child(2) {
width: 100px;
height: 100px;
bottom: 60px;
right: 80px;
background: radial-gradient(circle, #ff3c00, #ffb100);
}
.circle:nth-child(3) {
width: 80px;
height: 80px;
top: 100px;
right: 120px;
}
@keyframes float {
from { transform: translateY(0); }
to { transform: translateY(-30px); }
}
/* Glassmorphic form container */
.form-container {
position: relative;
width: 340px;
padding: 35px 25px;
border-radius: 25px;
backdrop-filter: blur(15px);
background: rgba(255, 255, 255, 0.08);
border: 2px solid rgba(255, 255, 255, 0.3);
text-align: center;
color: white;
z-index: 1;
}
h2 {
margin-bottom: 20px;
font-size: 22px;
letter-spacing: 1px;
}
/* Forms */
.form {
display: none;
flex-direction: column;
align-items: center;
}
.form.active {
display: flex;
}
input {
width: 85%;
padding: 12px;
margin: 8px 0;
border: none;
outline: none;
border-radius: 8px;
}
button {
width: 90%;
padding: 12px;
margin-top: 15px;
border: none;
border-radius: 8px;
background: linear-gradient(45deg, #ff6a00, #ffcc00);
color: white;
font-weight: bold;
cursor: pointer;
transition: 0.3s;
}
button:hover {
opacity: 0.9;
}
/* Social buttons */
.social-login {
display: flex;
justify-content: space-between;
gap: 10px;
margin-top: 15px;
width: 100%;
}
.social-login button {
flex: 1;
background: #fff;
color: #333;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 10px;
border-radius: 8px;
cursor: pointer;
transition: 0.3s;
}
.social-login button img {
width: 18px;
height: 18px;
}
/* Links */
p {
margin-top: 15px;
font-size: 14px;
}
a {
color: #ffcc00;
text-decoration: none;
font-weight: bold;
}
JavaScript
const loginForm = document.getElementById("loginForm");
const signupForm = document.getElementById("signupForm");
const toggleToSignup = document.getElementById("toggleForm");
const toggleToLogin = document.getElementById("toggleFormBack");
// Default: show login
loginForm.classList.add("active");
// Switch to signup
toggleToSignup.addEventListener("click", (e) => {
e.preventDefault();
loginForm.classList.remove("active");
signupForm.classList.add("active");
});
// Switch back to login
toggleToLogin.addEventListener("click", (e) => {
e.preventDefault();
signupForm.classList.remove("active");
loginForm.classList.add("active");
});