Formulario de inicio de sesión

5807 codex

Abrir en el editor Publica tu código

Recomendado

9 September 2024

CodePen - Campo de entrada de número de teléfono

17 May 2025

Tarjeta moderna con giro

28 September 2025

Plantilla HTML para tienda de zapatillas de deporte de comercio electrónico

HTML

CSS

body{
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background: #34495e;
}
.box{
  width: 300px;
  padding: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: #191919;
  text-align: center;
}
.box h1{
  color: white;
  text-transform: uppercase;
  font-weight: 500;
}
.box input[type = "text"],.box input[type = "password"]{
  border:0;
  background: none;
  display: block;
  margin: 20px auto;
  text-align: center;
  border: 2px solid #3498db;
  padding: 14px 10px;
  width: 200px;
  outline: none;
  color: white;
  border-radius: 24px;
  transition: 0.25s;
}
.box input[type = "text"]:focus,.box input[type = "password"]:focus{
  width: 280px;
  border-color: #2ecc71;
}
.box input[type = "submit"]{
  border:0;
  background: none;
  display: block;
  margin: 20px auto;
  text-align: center;
  border: 2px solid #2ecc71;
  padding: 14px 40px;
  outline: none;
  color: white;
  border-radius: 24px;
  transition: 0.25s;
  cursor: pointer;
}
.box input[type = "submit"]:hover{
  background: #2ecc71;
}

Recomendado

CodePen - Campo de entrada de número de teléfono

Tarjeta moderna con giro

Plantilla HTML para tienda de zapatillas de deporte de comercio electrónico

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS