Modèle de formulaire de connexion HTML avec connexion via les réseaux sociaux

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

28 December 2024

Feux d'artifice animés CSS, lucioles, tournesol

6 March 2025

<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;
    }
}

JS

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)';
        });
    });
});

Modèle de formulaire de connexion HTML avec connexion via les réseaux sociaux

Recommandé

Un code par staticdata256

Feux d'artifice animés CSS, lucioles, tournesol

Un code par lebdev

HTML

CSS

JS

Recommandé

Un code par staticdata256

Feux d'artifice animés CSS, lucioles, tournesol

Un code par lebdev

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS