Formulario de inicio de sesión simple

10,074 webleb

Abrir en el editor Publica tu código

Recomendado

13 September 2025

Animación de barra de carga CSS HTML

13 November 2024

Menú de navegación

11 August 2025

Contenedor de animación de mensajes HTML

HTML

CSS

@import url(https://fonts.googleapis.com/css?family=Poppins:300);

body {
  background: linear-gradient(90deg, rgb(41, 87, 214) 0%, rgb(39, 6, 138) 50%);
  font-family: "Poppins";    
  display: flex;
  justify-content: center;
  align-items: center;
  height:100vh ;
}
.form {
  position: relative;
  background: #FFFFFF;
  max-width: 360px;
  padding: 45px;
  text-align: center;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
  border-radius:15px;
}
.form input {
  outline: 0;
  background: #f2f2f2;
  width: 100%;
  border: 0;
  margin: 0 0 15px;
  padding: 15px;
  box-sizing: border-box;
  font-size: 14px;
  border-radius:15px;
}
.form button {
  text-transform: uppercase;
  outline: 0;
  background: #3324be;
  width: 100%;
  border: 0;
  padding: 15px;
  color: #FFFFFF;
  font-size: 14px;
  border-radius:15px;
  -webkit-transition: all 0.3 ease;
  transition: all 0.3 ease;
  cursor: pointer;
}
.form button:hover,.form button:active,.form button:focus {
  background: #2957d6;
}
.form .message {
  margin: 15px 0 0;
  color: #b3b3b3;
  font-size: 12px;
}
.form .message a {
  color: #3324be;
  text-decoration: none;
}