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

Abrir en el editor Publica tu código

Recomendado

30 November 2024

Tienda de accesorios de Star Wars

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

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

Recomendado

Texto resplandeciente

Inicio de sesión con tarjeta

Tienda de accesorios de Star Wars

HTML

CSS

JS

Recomendado

Texto resplandeciente

Inicio de sesión con tarjeta

Tienda de accesorios de Star Wars

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS