HTML, Iniciar sesión Registrarse animado

2324 codekafe

Abrir en el editor Publica tu código

HTML, Iniciar sesión Registrarse animado

Recomendado

16 July 2025

Formulario de inicio de sesión de Glassmorphic

9 September 2024

Formulario de inicio de sesión animado

5 December 2025

Ejemplo de código HTML del formulario de inicio de sesión de Jelly Morph

HTML

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login & Register</title>
    <link rel="stylesheet" href="style3.css">
</head>
<body>
    <div class="container">
        <div class="form-container login-container">
            <form action="#">
                <h1>Login</h1>
                <input type="email" placeholder="Email" required />
                <input type="password" placeholder="Kata Sandi" required />
                <button type="submit">Masuk</button>
                <span>Belum punya akun? <a href="#" class="toggle">Daftar</a></span>
            </form>
        </div>
        <div class="form-container register-container">
            <form action="#">
                <h1>Daftar</h1>
                <input type="text" placeholder="Nama Lengkap" required />
                <input type="email" placeholder="Email" required />
                <input type="password" placeholder="Kata Sandi" required />
                <button type="submit">Daftar</button>
                <span>Sudah punya akun? <a href="#" class="toggle">Masuk</a></span>
            </form>
        </div>
    </div>
    <script src="java.js"></script>
</body>
</html>

CSS

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Arial', sans-serif;
    background: linear-gradient(to right, #6a11cb, #2575fc);
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    width: 100%;
    max-width: 400px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    position: relative;
}

.form-container {
    padding: 20px;
    transition: all 0.5s ease;
}

h1 {
    margin-bottom: 20px;
    text-align: center;
}

input {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
}

button {
    width: 100%;
    padding: 10px;
    background: #6a11cb;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s ease;
}

Recomendado

Formulario de inicio de sesión de Glassmorphic

Formulario de inicio de sesión animado

Ejemplo de código HTML del formulario de inicio de sesión de Jelly Morph

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS