Inicio de sesión y registro animados

Abrir en el editor Publica tu código ¿Necesitas un sitio web?

Recomendado

9 May 2025

Ejemplo de página web de portafolio

30 June 2025

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Iniciar sesión y registrarse</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<header>
    <h2 class="logo">Andev web</h2>
    <nav class="navigation">
        <button class="bthLogin-popup">Iniciar sesión</button>
        <a href="#"></a>
        <a href="#"></a>
        <a href="#"></a>
        <a href="#"></a>
       
    </nav>
</header>
<div class="wrapper">
    <span class="icon-close">
        <ion-icon name="close"></ion-icon>
    </span>
    <div class="form-box login">
        <h2>Iniciar sesión</h2>
        <form action="#">
            <div class="input-box">
                <span class="icon">
                    <ion-icon name="mail"></ion-icon>
                </span>
                <input type="email" required>
                <label>Correo electrónico</label>
            </div>
            <div class="input-box">
                <span class="icon">
                    <ion-icon name="lock-closed"></ion-icon>
                </span>
                <input type="password" required>
                <label>Contraseña</label>
            </div>
            <div class="remember-forgot">
                <label><input type="checkbox" required>
                    Recordarme</label>
                <a href="#">¿Olvidaste la contraseña?</a>
            </div>
            <button type="submit" class="bth">Iniciar sesión</button>
            <div class="login-register">
                <p>¿No tienes una cuenta? <a href="#" class="register-link">Registrarse</a></p>
            </div>
        </form>
    </div>

<div class="form-box register">
        <h2>Registro</h2>
        <form action="#">
            <div class="input-box">
                <span class="icon">
                    <ion-icon name="person"></ion-icon>
                </span>
                <input type="text" required>
                <label>Nombre de usuario</label>
            </div>
            <div class="input-box">
                <span class="icon">
                    <ion-icon name="mail"></ion-icon>
                </span>
                <input type="email" required>
                <label>Correo electrónico</label>
            </div>
            <div class="input-box">
                <span class="icon">
                    <ion-icon name="lock-closed"></ion-icon>
                </span>
                <input type="password" required>
                <label>Contraseña</label>
            </div>
            <div class="remember-forgot">
                <label><input type="checkbox" required>
                    Acepto los términos y condiciones</label>
            </div>
            <button type="submit" class="bth">Registrarse</button>
            <div class="login-register">
                <p>¿Ya tienes una cuenta? <a href="#" class="login-link">Iniciar sesión</a></p>
            </div>
        </form>
    </div>
</div>
<script src="script.js"></script>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-size: cover;
    background: url('https://images.unsplash.com/photo-1716654195483-de7a5ad4d23c?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D') no-repeat center;
}
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 20px 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 99;
}
.logo {
    font-size: 2em;
    color: #ffffff;
    user-select: none;
}
.navigation a {
    position: relative;
    font-size: 1.1em;
    color: #ffffff;
    text-decoration: none;
    font-weight: 500;
    margin-left: 40px;
}
.navigation a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 3px;
    background: #ffffff;
    border-radius: 5px;
    transform-origin: right;
    transform: scaleX(0);
    transition: transform .5s;
}
.navigation a:hover::after {
    transform-origin: left;
    transform: scaleX(1);
}
.navigation .bthLogin-popup {
    width: 130px;
    height: 50px;
    background: transparent;
    border: 2px solid #ffffff;
    outline: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1.1em;
    color: #ffffff;
    font-weight: 500;
    margin-left: 40px;
    transition: .5s;
}
.navigation .bthLogin-popup:hover {
    background: #ffffff;
    color: #162938;
}
.wrapper {
    position: relative;
    width: 400px;
    height: 440px;
    background: transparent;
    border: 2px solid rgba(255, 255, 255, .5);
    border-radius: 20px;
    backdrop-filter: blur(20px);
    box-shadow: 0 0 30px rgba(0, 0, 0, .5);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    transform: scale(0);
    transition: transform .5s ease, height .2s ease;
}
.wrapper.active-popup {
    transform: scale(1);
}
.wrapper.active {
    height: 520px;
}
.wrapper .form-box {
    width: 100%;
    padding: 40px;
}
.wrapper .form-box.login {
    transition: transfrom .18s ease;
    transform: translateX(0);
}
.wrapper.active .form-box.login {
    transition: none;
    transform: translateX(-400px);
}
.wrapper .form-box.register {
    position: absolute;
    transition: none;
    transform: translateX(400px);
}
.wrapper.active .form-box.register {
    transition: transfrom .18s ease;
    transform: translateX(0);
}
.wrapper .icon-close {
    position: absolute;
    top: 0;
    right: 0;
    width: 45px;
    height: 45px;
    background: #162938;
    font-size: 2em;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom-left-radius: 20px;
    cursor: pointer;
    z-index: 1;
}
.form-box h2 {
    font-size: 2em;
    color: #ffffff;
    text-align: center;
}
.input-box {
    position: relative;
    width: 100%;
    height: 50px;
    border-bottom: 2px solid #ffffff;
    margin: 30px 0;
}
.input-box label {
    position: absolute;
    top: 50%;
    left: 5px;
    transform: translateY(-50%);
    font-size: 1em;
    color: #ffffff;
    font-weight: 500;
    pointer-events: none;
    transition: .5s;
}
.input-box input:focus ~ label,
.input-box input:valid ~ label {
    top: -5px;
}
.input-box input {
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    outline: none;
    font-size: 1em;
    color: #ffffff;
    font-weight: 600;
    padding: 0 35px 0 5px;
}
.input-box .icon {
    position: absolute;
    right: 8px;
    font-size: 1.2em;
    color: #ffffff;
    line-height: 57px;
}
.remember-forgot {
    font-size: .9em;
    color: #ffffff;
    font-weight: 500;
    margin: -15px 0 15px;
    display: flex;
    justify-content: space-between;
}
.remember-forgot label input {
    accent-color: #ffffff;
    margin-right: 3px;
}
.remember-forgot a {
    color: #ffffff;
    text-decoration: none;
}
.remember-forgot a:hover {
    text-decoration: underline;
}
.bth {
    width: 100%;
    height: 45px;
    background: #ffffff;
    border: none;
    outline: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1em;
    color: #162938;
    font-weight: 500;
}
/*Andev Web*/
.login-register {
    font-size: .9em;
    color: #fff;
    text-align: center;
    font-weight: 500;
    margin: 25px 0 10px;
}
.login-register p a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
}
.login-register p a:hover {
    text-decoration: underline;
}

Inicio de sesión y registro animados

Recomendado

bandera nacional

Ejemplo de página web de portafolio

Un código de Metr

HTML

CSS

JS

Recomendado

bandera nacional

Ejemplo de página web de portafolio

Un código de Metr

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS