Plantilla HTML/CSS de formulario de inicio de sesión y registro

1,336 oliaa

Abrir en el editor Publica tu código

Plantilla HTML/CSS de formulario de inicio de sesión y registro

Recomendado

19 November 2025

Pantalla de carga animada con puntos en CSS

18 March 2026

Formulario de inicio de sesión CSS animado

11 April 2025

Botón de página no válida

HTML

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Login / Sign Up</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, sans-serif;
    }
    body {
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #1e3c72, #2a5298);
    }

.container {
      width: 360px;
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 12px 25px rgba(0,0,0,0.25);
      overflow: hidden;
      animation: fadeIn 0.6s ease;
    }

.tabs {
      display: flex;
      cursor: pointer;
    }
    .tabs button {
      flex: 1;
      padding: 14px;
      border: none;
      background: #f0f0f0;
      font-size: 16px;
      font-weight: 600;
      transition: background 0.3s ease;
    }
    .tabs button.active {
      background: #2a5298;
      color: #fff;
    }

.form {
      padding: 24px;
      display: none;
      animation: slide 0.4s ease;
    }
    .form.active { display: block; }

.form h2 {
      margin-bottom: 18px;
      color: #2a5298;
      font-size: 22px;
      text-align: center;
    }

.input-group {
      margin-bottom: 16px;
    }
    .input-group label {
      font-size: 14px;
      color: #333;
      display: block;
      margin-bottom: 6px;
    }
    .input-group input {
      width: 100%;
      padding: 10px;
      border: 1px solid #bbb;
      border-radius: 8px;
      font-size: 15px;
    }

.form button {
      width: 100%;
      padding: 12px;
      background: #2a5298;
      color: #fff;
      font-size: 16px;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      transition: background 0.3s ease;
    }
    .form button:hover {
      background: #1e3c72;
    }

.extra {
      margin-top: 12px;
      text-align: center;
      font-size: 13px;
      color: #555;
    }
    .extra a {
      color: #2a5298;
      text-decoration: none;
      font-weight: 500;
    }

@keyframes fadeIn {
      from { opacity: 0; transform: scale(0.9);}
      to { opacity: 1; transform: scale(1);}
    }
    @keyframes slide {
      from { opacity: 0; transform: translateY(12px);}
      to { opacity: 1; transform: translateY(0);}
    }
  </style>
</head>
<body>

<div class="container">
    <div class="tabs">
      <button class="tab active" onclick="showForm('login')">Login</button>
      <button class="tab" onclick="showForm('signup')">Sign Up</button>
    </div>

<form class="form active" id="login">
      <h2>Welcome Back</h2>
      <div class="input-group">
        <label>Email</label>
        <input type="email" placeholder="Enter your email" required>
      </div>
      <div class="input-group">
        <label>Password</label>
        <input type="password" placeholder="Enter your password" required>
      </div>
      <button type="submit">Login</button>
      <div class="extra">
        <a href="#">Forgot Password?</a>
      </div>
    </form>

<form class="form" id="signup">
      <h2>Create Account</h2>
      <div class="input-group">
        <label>Username</label>
        <input type="text" placeholder="Choose a username" required>
      </div>
      <div class="input-group">
        <label>Email</label>
        <input type="email" placeholder="Enter your email" required>
      </div>
      <div class="input-group">
        <label>Password</label>
        <input type="password" placeholder="Create a password" required>
      </div>
      <button type="submit">Sign Up</button>
    </form>
  </div>

document.getElementById(formId).classList.add('active');
    event.target.classList.add('active');
  }
</script>

</body>
</html>

CSS

/* Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Poppins", system-ui, sans-serif;
}

/* Background with gradient + glow */
body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
  overflow: hidden;
}

/* Decorative glowing orbs */
body::before, body::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  z-index: 0;
}
body::before {
  width: 400px;
  height: 400px;
  top: -100px;
  left: -100px;
  background: rgba(0, 212, 255, 0.6);
}
body::after {
  width: 400px;
  height: 400px;
  bottom: -120px;
  right: -100px;
  background: rgba(255, 0, 180, 0.5);
}

/* Container (glass effect) */
.container {
  width: 380px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding-bottom: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  position: relative;
  z-index: 1;
  overflow: hidden;
  animation: fadeIn 0.8s ease;
}

/* Tabs */
.tabs {
  display: flex;
}
.tabs button {
  flex: 1;
  padding: 14px;
  border: none;
  background: transparent;
  font-size: 16px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.65);
  transition: all 0.3s ease;
  cursor: pointer;
}
.tabs button.active {
  color: #fff;
  background: linear-gradient(90deg, #00d4ff, #ff00b4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 17px;
}

/* Forms */
.form {
  padding: 24px;
  display: none;
  animation: slide 0.4s ease;
}
.form.active { display: block; }

.form h2 {
  margin-bottom: 18px;
  font-size: 24px;
  text-align: center;
  background: linear-gradient(90deg, #00d4ff, #ff00b4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Input groups */
.input-group {
  margin-bottom: 18px;
}
.input-group label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  display: block;
  margin-bottom: 6px;
}
.input-group input {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  outline: none;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.input-group input:focus {
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 8px rgba(0, 212, 255, 0.8);
}

/* Buttons */
.form button {
  width: 100%;
  padding: 12px;
  background: linear-gradient(90deg, #00d4ff, #ff00b4);
  color: #fff;
  font-size: 16px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  transition: transform 0.2s ease, box-shadow 0.3s ease;
}
.form button:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.7),
              0 0 30px rgba(255, 0, 180, 0.6);
}

/* Extra links */
.extra {
  margin-top: 14px;
  text-align: center;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}
.extra a {
  color: #00d4ff;
  text-decoration: none;
  font-weight: 500;
}
.extra a:hover {
  text-decoration: underline;
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.9);}
  to { opacity: 1; transform: scale(1);}
}
@keyframes slide {
  from { opacity: 0; transform: translateY(15px);}
  to { opacity: 1; transform: translateY(0);}
}