Formulario de inicio de sesión y registro HTML/CSS

7858 Xenox

Abrir en el editor Video Publica tu código

Formulario de inicio de sesión y registro HTML/CSS

Recomendado

18 August 2024

Página de venta de sillas

14 June 2024

icono de redes sociales con el cursor

15 July 2025

Ejemplo de formulario de inicio de sesión animado HTML

HTML

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

Recomendado

Página de venta de sillas

icono de redes sociales con el cursor

Ejemplo de formulario de inicio de sesión animado HTML

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS