Modèle de formulaire de connexion HTML réseaux sociaux

1,212 Skyrreum

Remixer Ouvrir dans l'éditeur Plein écran Discuter Publiez votre code

Modèle de formulaire de connexion HTML réseaux sociaux

Recommandé

22 November 2025

Animation de chargement CSS

16 January 2026

Modèle HTML de lecteur de jeu Flash (Ruffle)

21 April 2026

Tableau de bord géométrique du zodiaque

HTML

<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Skyrreum 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">Content de te revoir</div>
            <div class="subtitle">Connectez-vous à votre compte</div>

<button type="submit" class="btn-login">
                    Se connecter / Log In
                </button>
            </form>

<div class="social-login">
                <p>Ou continuez avec</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-instagram"></i></a>
                    <a href="#" class="social-btn"><i class="fab fa-facebook-f"></i></a>
                    <a href="#" class="social-btn"><i class="fab fa-github"></i></a>
                </div>
            </div>

<div class="footer-text">
                Pas de compte ? <a href="#">S'inscrire / 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 = 'Connexion...';
        loginBtn.style.opacity = '0.7';

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

setTimeout(() => {
                loginBtn.innerText = originalText;
                loginBtn.style.backgroundColor = '#1da1f2'; // Reset color
                loginBtn.style.opacity = '1';
                alert("Connexion réussie !");
            }, 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)';
        });
    });
});