HTML Login Form Template with Social Login

1,066 codex

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Neumorph Login</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <div class="login-card">
            <div class="logo">
                <i class="fas fa-layer-group"></i>
            </div>
            <div class="title">Welcome Back</div>
            <div class="subtitle">Sign in to your account</div>

<div class="social-login">
                <p>Or continue with</p>
                <div class="social-icons">
                    <a href="#" class="social-btn"><i class="fab fa-google"></i></a>
                    <a href="#" class="social-btn"><i class="fab fa-twitter"></i></a>
                    <a href="#" class="social-btn"><i class="fab fa-github"></i></a>
                </div>
            </div>

<div class="footer-text">
                Don't have an account? <a href="#">Sign up</a>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>

</html>

CSS

:root {
    --bg-color: #ecf0f3;
    --text-main: #555;
    --text-light: #a0a5a8;
    --shadow-light: #ffffff;
    --shadow-dark: #d1d9e6;
    --primary: #cbced1;
    --accent: #1da1f2;
    /* Example accent color for subtle highlights */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body {
    background-color: var(--bg-color);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.container {
    width: 100%;
    max-width: 450px;
    padding: 20px;
}

.login-card {
    background-color: var(--bg-color);
    padding: 60px 40px 40px 40px;
    border-radius: 40px;
    text-align: center;
    box-shadow: 13px 13px 20px var(--shadow-dark),
        -13px -13px 20px var(--shadow-light);
}

.logo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: #333;
    box-shadow: 8px 8px 16px var(--shadow-dark),
        -8px -8px 16px var(--shadow-light);
}

.title {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: 0.5px;
    margin-bottom: 5px;
}

.subtitle {
    font-size: 14px;
    color: var(--text-light);
    margin-bottom: 40px;
}

.input-group {
    position: relative;
    margin-bottom: 25px;
    border-radius: 25px;
    box-shadow: inset 8px 8px 8px var(--shadow-dark),
        inset -8px -8px 8px var(--shadow-light);
    display: flex;
    align-items: center;
    padding: 10px 20px;
    background: var(--bg-color);
}

.input-group .icon {
    color: var(--text-light);
    padding-right: 15px;
}

.input-group input {
    border: none;
    outline: none;
    background: none;
    font-size: 16px;
    color: var(--text-main);
    width: 100%;
    height: 40px;
}

.input-group input::placeholder {
    color: var(--text-light);
}

.btn-login {
    width: 100%;
    height: 60px;
    border-radius: 30px;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    background-color: #1da1f2;
    /* A bit of color for the primary action */
    border: none;
    outline: none;
    cursor: pointer;
    box-shadow: 8px 8px 16px var(--shadow-dark),
        -8px -8px 16px var(--shadow-light);
    transition: all 0.3s ease;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.btn-login:hover {
    background-color: #0d8bd9;
}

.btn-login:active {
    box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.1),
        inset -4px -4px 8px rgba(255, 255, 255, 0.1);
    transform: translateY(2px);
}

/* Social Login Styles */
.social-login {
    margin-top: 40px;
}

.social-login p {
    font-size: 13px;
    color: var(--text-light);
    margin-bottom: 20px;
}

.social-icons {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.social-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-main);
    font-size: 20px;
    text-decoration: none;
    box-shadow: 8px 8px 16px var(--shadow-dark),
        -8px -8px 16px var(--shadow-light);
    transition: all 0.3s ease;
}

.social-btn:hover {
    color: var(--accent);
    transform: translateY(-2px);
}

.social-btn:active {
    box-shadow: inset 4px 4px 8px var(--shadow-dark),
        inset -4px -4px 8px var(--shadow-light);
    transform: translateY(2px);
}

.footer-text {
    margin-top: 30px;
    font-size: 14px;
    color: var(--text-light);
}

.footer-text a {
    color: var(--text-main);
    text-decoration: none;
    font-weight: 600;
}

.footer-text a:hover {
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 480px) {
    .login-card {
        padding: 40px 20px;
    }
}

document.addEventListener('DOMContentLoaded', () => {
    const loginForm = document.querySelector('.login-form');
    const loginBtn = document.querySelector('.btn-login');

loginForm.addEventListener('submit', (e) => {
        e.preventDefault();

// Simulate loading state
        const originalText = loginBtn.innerText;
        loginBtn.innerText = 'Signing In...';
        loginBtn.style.opacity = '0.7';

setTimeout(() => {
            loginBtn.innerText = 'Success!';
            loginBtn.style.backgroundColor = '#4CAF50'; // Green for success

setTimeout(() => {
                loginBtn.innerText = originalText;
                loginBtn.style.backgroundColor = '#1da1f2'; // Reset color
                loginBtn.style.opacity = '1';
                alert("Login successful!");
            }, 1000);
        }, 1500);
    });

// Add satisfying click effects for all neumorphic buttons
    const buttons = document.querySelectorAll('.social-btn, .btn-login');
    buttons.forEach(btn => {
        btn.addEventListener('touchstart', function () {
            this.style.transform = 'scale(0.95)';
        });
        btn.addEventListener('touchend', function () {
            this.style.transform = 'scale(1)';
        });
    });
});

HTML Login Form Template with Social Login

Recommended