WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Fragmento de código del formulario de inicio de sesión HTML
1,131
codex
Abrir en el editor
Publica tu código
0
Recomendado
9 July 2025
Tarjeta de precios con efecto de inclinación 3D y anillo de energía
13 June 2025
Un código de Metehan
17 March 2023
Formulario de suscripción a boletín informativo
HTML
Copy
Login
Username
Password
CSS
Copy
html { height: 100%; } .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 }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */