Formulario de inicio de sesión HTML CSS

19,102 alex

Abrir en el editor Publica tu código

Recomendado

30 August 2024

Animaciones impulsadas por desplazamiento Detección de desplazamiento

20 February 2026

Cargador de cubos de imágenes 3D

10 June 2025

Un código de Mete

HTML

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic HTML CSS Login Form</title>
    <link rel="stylesheet" href="/css/styles.css">
</head>
<body>
    <body>
        <div class="login">
            <div class="login-screen">
                <div class="app-title">
                    <h1>Welcome</h1>
                </div>
    
                <div class="login-form">
                    <div class="control-group">
                    <input type="text" class="login-field" value="" placeholder="username" id="login-name">
                    <label class="login-field-icon fui-user" for="login-name"></label>
                    </div>
    
                    <div class="control-group">
                    <input type="password" class="login-field" value="" placeholder="password" id="login-pass">
                    <label class="login-field-icon fui-lock" for="login-pass"></label>
                    </div>
    
                    <a class="btn btn-primary btn-large btn-block" href="#">Login</a>
                    <a class="login-link" href="#">Lost your password?</a>
                </div>
            </div>
        </div>
    </body>
</body>
</html>

CSS

* {
  box-sizing: border-box;
  }
  
  *:focus {
    outline: none;
  }
  body {
  font-family: Arial;
  background-color: #3498DB;
  padding: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  }
  .login {
  margin: 20px auto;
  width: 300px;
  }
  .login-screen {
  background-color: #FFF;
  padding: 20px;
  border-radius: 10px
  }
  
  .app-title {
  text-align: center;
  color: #777;
  }
  
  .login-form {
  text-align: center;
  }
  .control-group {
  margin-bottom: 10px;
  }
  
  input {
  text-align: center;
  background-color: #ECF0F1;
  border: 2px solid transparent;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 200;
  padding: 10px 0;
  width: 250px;
  transition: border .5s;
  }
  
  input:focus {
  border: 2px solid #3498DB;
  box-shadow: none;
  }
  
  .btn {
    border: 2px solid transparent;
    background: #3498DB;
    color: #ffffff;
    font-size: 16px;
    line-height: 25px;
    padding: 10px 0;
    text-decoration: none;
    text-shadow: none;
    border-radius: 10px;
    box-shadow: none;
    transition: 0.25s;
    display: block;
    width: 250px;
    margin: 0 auto;
  }
  
  .btn:hover {
    background-color: #2980B9;
  }
  
  .login-link {
    font-size: 12px;
    color: #444;
    display: block;
    margin-top: 12px;
  }