Formulaire de connexion et d'inscription HTML/CSS

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

30 November 2024

Exemple d'animation de bouton HTML CSS

10 June 2025

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dark Login | Sign Up</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="form-box" id="login">
      <h2>Connexion</h2>
      <div class="input-box">
        
        <svg viewBox="0 0 24 24">
          <path d="M20 4H4C2.897 4 2 4.897 2 6v12c0 
          1.103.897 2 2 2h16c1.103 0 2-.897 
          2-2V6c0-1.103-.897-2-2-2zm0 
          2v.511l-8 5.333-8-5.333V6h16zM4 
          18V8.489l8 5.333 8-5.333V18H4z"/>
        </svg>
        <input type="email" placeholder="Email">
      </div>
      <div class="input-box">
        
        <svg viewBox="0 0 24 24">
          <path d="M17 8h-1V6a4 4 0 00-8 
          0v2H7c-1.103 0-2 .897-2 
          2v10c0 1.103.897 2 2 
          2h10c1.103 0 2-.897 
          2-2V10c0-1.103-.897-2-2-2zM9 
          6a2 2 0 014 0v2H9V6zm8 
          14H7V10h10v10z"/>
        </svg>
        <input type="password" placeholder="Mot de passe">
      </div>
      <button class="btn">Se connecter</button>
      <p class="switch">
        Pas de compte ? 
        <button class="link-btn" onclick="toggleForm()">Inscription</button>
      </p>
    </div>

<div class="form-box" id="signup">
      <h2>Inscription</h2>
      <div class="input-box">
        
        <svg viewBox="0 0 24 24">
          <path d="M12 12c2.7 0 5-2.3 5-5s-2.3-5-5-5-5 
          2.3-5 5 2.3 5 5 5zm0 
          2c-3.3 0-10 1.7-10 5v3h20v-3c0-3.3-6.7-5-10-5z"/>
        </svg>
        <input type="text" placeholder="Nom d’utilisateur">
      </div>
      <div class="input-box">
        
        <svg viewBox="0 0 24 24">
          <path d="M20 4H4C2.897 4 2 4.897 2 6v12c0 
          1.103.897 2 2 2h16c1.103 0 2-.897 
          2-2V6c0-1.103-.897-2-2-2zm0 
          2v.511l-8 5.333-8-5.333V6h16zM4 
          18V8.489l8 5.333 8-5.333V18H4z"/>
        </svg>
        <input type="email" placeholder="Email">
      </div>
      <div class="input-box">
        
        <svg viewBox="0 0 24 24">
          <path d="M17 8h-1V6a4 4 0 00-8 
          0v2H7c-1.103 0-2 .897-2 
          2v10c0 1.103.897 2 2 
          2h10c1.103 0 2-.897 
          2-2V10c0-1.103-.897-2-2-2zM9 
          6a2 2 0 014 0v2H9V6zm8 
          14H7V10h10v10z"/>
        </svg>
        <input type="password" placeholder="Mot de passe">
      </div>
      <button class="btn">Créer un compte</button>
      <p class="switch">
        Déjà inscrit ? 
        <button class="link-btn" onclick="toggleForm()">Connexion</button>
      </p>
    </div>

</div>

<script>
    const container = document.getElementById('container');
    function toggleForm() {
      container.classList.toggle('active');
    }
  </script>

</body>
</html>

CSS

/* ---- RESET ---- */
* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
  font-family: 'Segoe UI', sans-serif; 
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: radial-gradient(circle at top, #0e0e0e, #050505);
  color: #fff;
  overflow: hidden;
}

/* ---- CONTAINER ---- */
.container {
  position: relative;
  width: 380px;
  height: 520px;
  background: rgba(20,20,20,0.95);
  border-radius: 20px;
  box-shadow: 0 0 40px rgba(0, 255, 200, 0.35);
  overflow: hidden;
  backdrop-filter: blur(10px);
}

/* ---- FORM ---- */
.form-box {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 40px;
  transition: 0.6s ease-in-out;
  opacity: 0;
  transform: translateX(100%);
}

.form-box h2 {
  text-align: center;
  margin-bottom: 25px;
  font-size: 2rem;
  letter-spacing: 1.5px;
  color: #00ffc6;
  text-shadow: 0 0 12px rgba(0, 255, 200, 0.7);
}

/* ---- INPUTS ---- */
.input-box {
  position: relative;
  width: 100%;
  margin: 20px 0;
}

.input-box svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  fill: #00ffc6;
  opacity: 0.8;
  pointer-events: none;
}

.input-box input {
  width: 100%;
  padding: 12px 15px 12px 45px;
  border: none;
  border-radius: 10px;
  outline: none;
  font-size: 1rem;
  background: #111;
  color: #fff;
  transition: 0.3s;
  box-shadow: inset 0 0 5px rgba(0, 255, 200, 0.3);
}

.input-box input:focus {
  background: #0b0b0b;
  box-shadow: 0 0 15px #00ffc6;
  border: 1px solid #00ffc6;
}

/* ---- PASSWORD ANIMATION ---- */
.input-box input[type="password"]:focus {
  animation: pulse 1s infinite alternate;
}

@keyframes pulse {
  from { box-shadow: 0 0 10px #00ffc6; }
  to { box-shadow: 0 0 20px #00ffc6; }
}

/* ---- BUTTON ---- */
.btn {
  width: 100%;
  padding: 14px;
  margin-top: 25px;
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: bold;
  color: #000;
  background: linear-gradient(135deg, #00ffc6, #00e6ac);
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 0 15px rgba(0, 255, 200, 0.5);
}

.btn:hover {
  transform: scale(1.03);
  background: linear-gradient(135deg, #00e6ac, #00ffc6);
  box-shadow: 0 0 25px rgba(0, 255, 200, 0.8);
}

/* ---- SWITCH ---- */
.switch {
  margin-top: 25px;
  text-align: center;
  font-size: 0.9rem;
  color: #ccc;
}

/* ---- LINK BUTTON ---- */
.link-btn {
  background: none;
  border: none;
  color: #00ffc6;
  font-weight: bold;
  font-size: 0.95rem;
  cursor: pointer;
  transition: 0.2s;
}

.link-btn:hover {
  color: #00e6ac;
  text-decoration: underline;
}

/* ---- FORM POSITIONS ---- */
#login {
  left: 0;
  transform: translateX(0);
  opacity: 1;
  transition: all 0.6s ease-in-out;
}

#signup {
  left: 0; /* même position que login */
  transform: translateX(100%);
  opacity: 0;
  transition: all 0.6s ease-in-out;
}

.container.active #login {
  transform: translateX(-100%);
  opacity: 0;
}

.container.active #signup {
  transform: translateX(0);
  opacity: 1;
}

Formulaire de connexion et d'inscription HTML/CSS

Recommandé

Menu de navigation Coreboot

Exemple d'animation de bouton HTML CSS

Un code de Mete

HTML

CSS

JS

Recommandé

Menu de navigation Coreboot

Exemple d'animation de bouton HTML CSS

Un code de Mete

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS