Inicio de sesión y registro animados

3872 Andev.web

Abrir en el editor Publica tu código

Recomendado

16 October 2025

Ejemplo de elemento de carga animado CSS

13 July 2024

Botón de luciérnagas

19 October 2024

Código de barra de navegación HTML CSS

HTML

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

Recomendado

Ejemplo de elemento de carga animado CSS

Botón de luciérnagas

Código de barra de navegación HTML CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS