Formulario de inicio de sesión HTML animado

3,318 dev_b

Remix Abrir en el editor Pantalla completa Comentar Publica tu código

Formulario de inicio de sesión HTML animado

Recomendado

12 October 2025

Estructura HTML de la animación de carga CSS

24 February 2024

Generador de ideas HTML

29 December 2025

Control deslizante de imágenes HTML CSS JavaScript

HTML

CSS

body {
            font-family: Arial, sans-serif;
            background-color: #f0f2f5;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

.login-container {
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            width: 300px;
            transition: transform 0.3s ease;
        }

.login-container:hover {
            transform: scale(1.05);
        }

h2 {
            text-align: center;
            margin-bottom: 20px;
            color: #333;
        }

.form-group {
            margin-bottom: 15px;
        }

label {
            display: block;
            margin-bottom: 5px;
            color: #333;
        }

input[type="text"],
        input[type="password"] {
            width: 93%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            transition: border-color 0.3s;
        }

input[type="text"]:focus,
        input[type="password"]:focus {
            border-color: #007bff;
            outline: none;
        }

button {
            width: 100%;
            padding: 10px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
            margin-top: 10px;
        }

button:hover {
            background-color: #0056b3;
        }

.forgot-password {
            text-align: center;
            margin-top: 10px;
        }

.forgot-password a {
            color: #007bff;
            text-decoration: none;
        }

.forgot-password a:hover {
            text-decoration: underline;
        }