Formulário de login HTML animado

2606 dev_b

Abrir no Editor Video Publique Seu Código

Recomendado

18 December 2025

Código HTML do jogo Aquapark IO desbloqueado

20 January 2025

Notificação de brinde

30 November 2024

Site de viagens com raio de borda invertido

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;
        }

Recomendado

Código HTML do jogo Aquapark IO desbloqueado

Notificação de brinde

Site de viagens com raio de borda invertido

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS