5 Plantillas que te ayudará con el diseño de tu LOGIN CON ROLES, la última plantilla tiene un botón para intercambiar los formularios entre el login y registrar.
Recuerda que estos proyectos es solo el diseño HTML y CSS.
Debes de crear en una carpeta las hojas index.html y vaidroll.css, en algunos proyectos es necesario una imagen de fondo o un logo.
Opción 1
Código
index.html
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>VaidrollTeamLogin8</title> <link rel="stylesheet" href="vaidroll.css"> </head> <body> <div class="caja1"> <form method="post" action="login.php"> <div class="formtlo">Login</div> <div class="ub1">🔑 Ingresar usuario</div> <input type="text" name="txtusuario" placeholder="Ingresar usuario"> <div class="ub1">🔒 Ingresar password</div> <input type="password" name="txtpassword" id="txtpassword" placeholder="Ingresar password"> <div class="ub1"> <input type="checkbox" onclick="verpassword()" >Mostrar contraseña </div> <div class="ub1">Rol</div> <select name="rol"> <option value="0" style="display:none;"><label>Seleccionar</label></option> <option value="Usuario">Usuario</option> <option value="Admin">Administrador</option> </select> <div align="center"> <input type="submit" value="Ingresar"> <input type="reset" value="Cancelar"> </div> </form> </div> </body> <script> function verpassword(){ var tipo = document.getElementById("txtpassword"); if(tipo.type == "password") { tipo.type = "text"; } else { tipo.type = "password"; } } </script> </html>
vaidroll.css
*
{
font-family:arial;
text-align:center;
}
body
{
top:50%;
left:50%;
position: absolute;
transform: translate(-50%,-50%);
background-image: radial-gradient(circle at 50% -20.71%, #d1c74b 0, #d9be40 8.33%, #e0b436 16.67%, #e7a82d 25%, #ec9b25 33.33%, #f08c21 41.67%, #f37b1f 50%, #f56922 58.33%, #f75528 66.67%, #f93f31 75%, #fa203b 83.33%, #f90047 91.67%, #f80054 100%);
}
.ub1
{
text-align:left;
font-weight: bold;
color:white;
margin-bottom:0.5em;
margin-top:0.5em;
}
.caja1
{
background-color: rgba(0, 0, 0, .5);
width:20em;
height: auto;
position: relative;
margin: auto;
padding: 2em;
border-radius: 1em;
color:black;
}
input, select
{
width: 100%;
padding: 0.5em;
font-size:1em;
border-radius:5px;
border:1px solid black;
color:black;
text-align:left;
}
input::placeholder
{
color: #1E265D;
font-weight: bold;
opacity: 0.5;
}
input[type=submit],input[type=reset]
{
margin-top: 1.5em;
width:48%;
text-align:center;
background-color: #1958AD;
color:white;
}
input[type=checkbox]
{
margin-left:0;
width:10%;
}
.formtlo
{
font-size:2em;
font-weight: bold;
padding-bottom:0.8em;
color:white;
}
Opción 2
Código
index.html
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>VaidrollTeamLogin8</title> <link rel="stylesheet" href="vaidroll.css"> </head> <body> <div class="caja1"> <form method="post" action="login.php"> <div class="formtlo">Login</div> <div class="ub1">🔑 Ingresar usuario</div> <input type="text" name="txtusuario" placeholder="Ingresar usuario..."> <div class="ub1">🔒 Ingresar password</div> <input type="password" name="txtpassword" id="txtpassword" placeholder="Ingresar password..."> <div class="ub1"> <input type="checkbox" onclick="verpassword()" >Mostrar contraseña </div> <div class="ub1">Rol</div> <select name="rol"> <option value="0" style="display:none;"><label>Seleccionar</label></option> <option value="1">Rol1</option> <option value="2">Rol2</option> <option value="3">Rol3</option> <option value="4">Rol4</option> </select> <div align="center"> <input type="submit" value="Ingresar"> <input type="reset" value="Cancelar"> </div> </form> </div> </body> <script> function verpassword(){ var tipo = document.getElementById("txtpassword"); if(tipo.type == "password") { tipo.type = "text"; } else { tipo.type = "password"; } } </script> </html>
vaidroll.css
*
{
font-family:arial;
text-align:center;
}
body
{
top:50%;
left:50%;
position: absolute;
transform: translate(-50%,-50%);
background-image: radial-gradient(circle at 100% 0%, #aba0f9 0, #8286ef 25%, #486ee5 50%, #0058db 75%, #0047d2 100%);
}
.ub1
{
text-align:left;
font-weight: bold;
color:black;
margin-bottom:0.5em;
margin-top:0.5em;
}
.caja1
{
background-color: white;
width:20em;
height: auto;
position: relative;
margin: auto;
padding: 2em;
color:black;
}
input, select
{
width: 100%;
padding: 0.5em;
font-size:1em;
cursor:pointer;
border:1px solid #BDBFC1;
color:black;
text-align:left;
}
input::placeholder
{
color: #1E265D;
font-weight: bold;
opacity: 0.5;
}
input[type=submit],input[type=reset]
{
margin-top: 1.5em;
width:100%;
text-align:center;
background-color: #2669AB;
color:white;
cursor:pointer;
}
input[type=checkbox]
{
margin-left:0;
width:10%;
cursor:pointer;
}
.formtlo
{
font-size:2em;
font-weight: bold;
padding-bottom:0.8em;
color:black;
}
Opción 3
Código
index.html
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>VaidrollTeamLogin8</title> <link rel="stylesheet" href="vaidroll.css"> </head> <body> <div class="caja1"> <form method="post" action="login.php"> <div class="formtlo">Login</div> <input type="text" name="txtusuario" placeholder="🔑 Ingresar usuario..."> <input type="password" name="txtpassword" id="txtpassword" placeholder="🔒 Ingresar password..."> <div class="ub1"> <input type="checkbox" onclick="verpassword()" >Mostrar contraseña </div> <div class="ub1">Rol</div> <select name="rol"> <option value="0" style="display:none;"><label>Seleccionar</label></option> <option value="1">Rol1</option> <option value="2">Rol2</option> <option value="3">Rol3</option> <option value="4">Rol4</option> </select> <div align="center"> <input type="submit" value="Ingresar"> <input type="reset" value="Cancelar"> </div> </form> </div> </body> <script> function verpassword(){ var tipo = document.getElementById("txtpassword"); if(tipo.type == "password") { tipo.type = "text"; } else { tipo.type = "password"; } } </script> </html>
vaidroll.css
*
{
font-family:arial;
text-align:center;
}
body
{
top:50%;
left:50%;
position: absolute;
transform: translate(-50%,-50%);
background-image: linear-gradient(to right top, #d16ba5, #a65e99, #7d5187, #574372, #363459, #2f3d62, #274669, #1e4e6e, #1c7697, #1ba1bc, #32ceda, #5ffbf1);
}
.ub1
{
text-align:left;
font-weight: bold;
color:black;
margin-bottom:0.5em;
margin-top:0.5em;
}
.caja1
{
background-color: white;
width:20em;
height: auto;
position: relative;
margin: auto;
padding: 2em;
color:black;
border-radius:1em;
border:0.1em solid black;
}
input, select
{
width: 100%;
padding: 0.5em;
font-size:1em;
cursor:pointer;
border:none;
border-bottom:0.1em solid #BDBFC1;
color:black;
text-align:left;
margin-bottom:1em;
}
input:hover, select:hover
{
border:none;
border-bottom:0.1em solid red;
}
input::placeholder
{
color: #1E265D;
font-weight: bold;
opacity: 0.5;
}
input[type=submit],input[type=reset]
{
border-bottom:0.1em solid #BDBFC1;
margin-top: 1em;
width:40%;
text-align:center;
background-color: #0081CF;
color:white;
cursor:pointer;
}
input[type=checkbox]
{
margin-left:0;
width:10%;
cursor:pointer;
}
.formtlo
{
font-size:2em;
font-weight: bold;
padding-bottom:0.8em;
color:black;
}
Opción 4
Código
index.html
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>VaidrollTeamLogin8</title> <link rel="stylesheet" href="vaidroll.css"> </head> <body> <div class="caja1"> <form method="post" action="login.php"> <div class="formtlo">Login</div> <img src="user1.png"> <img src="user2.png"> <div class="ub1">🔑 Ingresar usuario</div> <input type="text" name="txtusuario" placeholder="Ingresar usuario..."> <div class="ub1">🔒 Ingresar password</div> <input type="password" name="txtpassword" id="txtpassword" placeholder="Ingresar password..."> <div class="ub1"> <input type="checkbox" onclick="verpassword()" >Mostrar contraseña </div> <div class="ub1">Rol</div> <select name="rol"> <option value="0" style="display:none;"><label>Seleccionar</label></option> <option value="Usuario">Usuario</option> <option value="Admin">Administrador</option> </select> <div align="center"> <input type="submit" value="Ingresar"> <input type="reset" value="Cancelar"> </div> <div class="ref1"><a href="#">Registrar</a> / <a href="#">Recuperar contraseña</a></div> </form> </div> </body> <script> function verpassword(){ var tipo = document.getElementById("txtpassword"); if(tipo.type == "password") { tipo.type = "text"; } else { tipo.type = "password"; } } </script> </html>
vaidroll.css
*
{
font-family:arial;
text-align:center;
}
body
{
top:50%;
left:50%;
position: absolute;
transform: translate(-50%,-50%);
background-image: linear-gradient(to right top, #6bd18e, #00bea2, #00a7af, #008fb0, #0075a3, #0a6b98, #10628c, #135981, #005d7b, #006073, #126369, #286460);
}
.ub1
{
text-align:left;
font-weight: bold;
color:white;
margin-bottom:0.5em;
margin-top:0.5em;
}
.caja1
{
background-color: rgba(0, 0, 0, .5);
width:20em;
height: auto;
position: relative;
margin: auto;
padding: 2em;
border-radius: 1em;
color:black;
}
input, select
{
width: 100%;
padding: 0.5em;
font-size:1em;
border-radius:5px;
border:1px solid black;
color:black;
text-align:left;
cursor:pointer;
}
input::placeholder
{
color: #1E265D;
font-weight: bold;
opacity: 0.5;
}
input[type=submit],input[type=reset]
{
margin-top: 1.5em;
width:48%;
text-align:center;
background-color: #1958AD;
color:white;
cursor:pointer;
}
input[type=checkbox]
{
margin-left:0;
width:10%;
cursor:pointer;
}
.formtlo
{
font-size:2em;
font-weight: bold;
padding-bottom:0.8em;
color:white;
}
img
{
border-radius: 50%;
padding:0.5em;
width:8em;
height:8em;
margin-bottom:2em;
}
.ref1
{
margin-top:1em;
color:orange;
}
a
{
color:white;
text-decoration: none;
cursor:pointer;
}
Opción 5
Código
index.html
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>VaidrollTeamLogin8</title> <link rel="stylesheet" href="vaidroll.css"> </head> <body> <div class="caja1"> <div class="botondeintercambiar"> <div id="btnvai"></div> <button type="button" class="botoncambiarcaja" onclick="loginvai()" id="vaibtnlogin">Login</button> <button type="button" class="botoncambiarcaja" onclick="registrarvai()" id="vaibtnregistrar">Registrar</button> </div> <form method="post" action="login.php" id="frmlogin" class="grupo-entradas"> <div class="ub1">🔑 Ingresar usuario</div> <input type="text" name="txtusuario" placeholder="Ingresar usuario"> <div class="ub1">🔒 Ingresar password</div> <input type="password" name="txtpassword" id="txtpassword" placeholder="Ingresar password"> <div class="ub1"> <input type="checkbox" onclick="verpassword()" >Mostrar contraseña </div> <div class="ub1">Rol</div> <select name="rol"> <option value="0" style="display:none;"><label>Seleccionar</label></option> <option value="Usuario">Usuario</option> <option value="Admin">Administrador</option> </select> <div align="center"> <input type="submit" value="Ingresar"> <input type="reset" value="Cancelar"> </div> </form> <form method="post" action="registrar.php" id="frmregistrar" class="grupo-entradas"> <div class="ub1">🔑 Ingresar usuario</div> <input type="text" name="txtusuario2" placeholder="Ingresar usuario"> <div class="ub1">🔒 Ingresar password</div> <input type="password" name="txtpassword2" id="txtpassword2" placeholder="Ingresar password"> <div class="ub1"> <input type="checkbox" onclick="verpassword2()" >Mostrar contraseña </div> <div class="ub1">Rol</div> <select name="rol"> <option value="0" style="display:none;"><label>Seleccionar</label></option> <option value="Usuario">Usuario</option> <option value="Admin">Administrador</option> </select> <div align="center"> <input type="submit" value="Registrar"> <input type="reset" value="Cancelar"> </div> </form> </div> </body> <script> function verpassword() { var tipo = document.getElementById("txtpassword"); if(tipo.type == "password") { tipo.type = "text"; } else { tipo.type = "password"; } } function verpassword2() { var tipo = document.getElementById("txtpassword2"); if(tipo.type == "password") { tipo.type = "text"; } else { tipo.type = "password"; } } var x = document.getElementById("frmlogin"); var y = document.getElementById("frmregistrar"); var z = document.getElementById("btnvai"); function registrarvai() { x.style.left = "-400px"; y.style.left = "50px"; z.style.left = "110px"; } function loginvai() { x.style.left = "50px"; y.style.left = "450px"; z.style.left = "0"; } </script> </html>
vaidroll.css
*
{
font-family:arial;
text-align:center;
margin: 0;
padding: 0;
}
body
{
top:50%;
left:50%;
position: absolute;
transform: translate(-50%,-50%);
background-image: linear-gradient(to right top, #ac2063, #9f2472, #8c2b80, #75338c, #583b94, #3e4292, #23468c, #004883, #00486e, #004355, #1d3c40, #2e3433);
}
.ub1
{
text-align:left;
font-weight: bold;
color:white;
margin-bottom:0.5em;
margin-top:0.5em;
}
#frmlogin{
left: 50px;
}
#frmregistrar{
left: 450px;
}
.caja1
{
background-color: rgba(0, 0, 0, .5);
width:26em;
height: 28em;
position: relative;
margin:auto;
padding: 0.1em;
border-radius: 1em;
color:black;
overflow: hidden;
}
.grupo-entradas{
position: absolute;
width:20em;
height: auto;
transition: .5s;
}
input, select
{
width: 100%;
padding: 0.5em;
font-size:1em;
border-radius:5px;
border:1px solid black;
color:black;
text-align:left;
cursor:pointer;
}
input::placeholder
{
color: #1E265D;
font-weight: bold;
opacity: 0.5;
}
input[type=submit],input[type=reset]
{
margin-top: 1.5em;
width:48%;
text-align:center;
background-color: #1958AD;
color:white;
}
input[type=checkbox]
{
margin-left:0;
width:10%;
}
.botondeintercambiar{
width: 240px;
margin: 35px auto;
position: relative;
box-shadow: 0 0 6px 0.5px black;
border-radius: 30px;
}
.botoncambiarcaja{
padding: 10px 30px;
cursor: pointer;
background: transparent;
border: 0;
outline: none;
position: relative;
font-weight: bold;
font-size:16px;
color:white;
}
#btnvai{
top: 0;
left: 0;
position: absolute;
width: 130px;
height: 100%;
background-color: #1C62C1;
border-radius: 30px;
transition: .5s;
}
Listo.
