Formulario de inicio de sesión HTML CSS

18,785 alex

Abrir en el editor Publica tu código

Recomendado

31 January 2026

Cargador de juegos HTML5 de People Playground

28 October 2025

Ejemplo de efectos al pasar el cursor sobre un botón HTML

29 August 2025

Fragmento de animación de memoria CSS

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