Formulario de inicio de sesión HTML simple y gratuito

4035 lebdev

Abrir en el editor Publica tu código

Formulario de inicio de sesión HTML simple y gratuito

Recomendado

30 August 2024

Animación responsiva de una casa Div con CSS puro

1 October 2025

Estructura HTML de la animación de carga CSS

24 November 2025

Cargador de juegos Unity WebGL con soporte publicitario

HTML

CSS

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');
html {
    height: 100%;
    font-family: Montserrat;
  }
  
  .login-box {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    padding: 40px;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,.5);
    box-sizing: border-box;
    box-shadow: 0 15px 25px rgba(0,0,0,.6);
    border-radius: 10px;
  }
  
  .login-box h2 {
    margin: 0 0 30px;
    padding: 0;
    color: #fff;
    text-align: center;
  }
  
  .login-box .user-box {
    position: relative;
  }
  
  .login-box .user-box input {
    width: 100%;
    padding: 10px 0;
    font-size: 16px;
    color: #fff;
    margin-bottom: 30px;
    border: none;
    border-bottom: 1px solid #fff;
    outline: none;
    background: transparent;
  }
  .login-box .user-box label {
    position: absolute;
    top:0;
    left: 0;
    padding: 10px 0;
    font-size: 16px;
    color: #fff;
    pointer-events: none;
    transition: .5s;
  }
  
  .login-box .user-box input:focus ~ label,
  .login-box .user-box input:valid ~ label {
    top: -20px;
    left: 0;
    color: #03e9f4;
    font-size: 12px;
  }
  
  .login-box form a {
    position: relative;
    display: inline-block;
    padding: 10px 20px;
    color: #03e9f4;
    font-size: 16px;
    text-decoration: none;
    text-transform: uppercase;
    overflow: hidden;
    transition: .5s;
    margin-top: 40px;
    letter-spacing: 4px
  }

Recomendado

Animación responsiva de una casa Div con CSS puro

Estructura HTML de la animación de carga CSS

Cargador de juegos Unity WebGL con soporte publicitario

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS