Impresionante formulario de inicio de sesión

1151 hasan

Abrir en el editor Publica tu código

Impresionante formulario de inicio de sesión

Recomendado

18 June 2025

Plantilla de formulario de inicio de sesión HTML

28 March 2023

Conexión de formulario a base de datos con Php

6 January 2025

Un código de pivete290

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Awesome Login Form</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
    <div class="circles">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </div>

<div class="login-container">
        <div class="login-header">
            <h1>Welcome Back</h1>
            <p>Please login to your account</p>
        </div>

<form id="loginForm">
            <div class="input-group">
                <input type="email" id="email" required>
                <label for="email">Email</label>
                <div class="error-message" id="email-error">Please enter a valid email</div>
            </div>

<div class="input-group">
                <input type="password" id="password" required>
                <label for="password">Password</label>
                <div class="error-message" id="password-error">Password must be at least 6 characters</div>
            </div>

<div class="forgot-password">
                <a href="#">Forgot Password?</a>
            </div>

<button type="submit" class="login-button">Login</button>

<div class="signup-link">
                Don't have an account? <a href="#" class="signup-text">Sign up</a>
            </div>

CSS

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

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.login-container {
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    width: 400px;
    max-width: 90%;
    padding: 40px;
    position: relative;
    overflow: hidden;
    transform: scale(0.95);
    transition: transform 0.5s ease, box-shadow 0.5s ease;
    z-index: 10;
}

.login-container:hover {
    transform: scale(1);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.login-container::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transform: rotate(45deg);
    animation: shine 3s infinite;
    z-index: -1;
}

@keyframes shine {
    0% {
        left: -100%;
    }
    20%, 100% {
        left: 100%;
    }
}

.login-header {
    text-align: center;
    margin-bottom: 40px;
}

.login-header h1 {
    color: #333;
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 10px;
}

.login-header p {
    color: #666;
    font-size: 14px;
}

.input-group {
    position: relative;
    margin-bottom: 25px;
}

.input-group input {
    width: 100%;
    padding: 15px 20px;
    border: none;
    background-color: #f5f5f5;
    border-radius: 50px;
    font-size: 16px;
    outline: none;
    transition: all 0.3s ease;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.05);
}

.input-group input:focus {
    background-color: #e9e9e9;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.1);
}

.input-group label {
    position: absolute;
    top: 15px;
    left: 20px;
    color: #999;
    font-size: 16px;
    pointer-events: none;
    transition: all 0.3s ease;
}

.input-group input:focus + label,
.input-group input:valid + label {
    top: -10px;
    left: 15px;
    font-size: 12px;
    background-color: #fff;
    padding: 0 5px;
    color: #764ba2;
}

.forgot-password {
    text-align: right;
    margin-bottom: 20px;
}

.forgot-password a {
    color: #666;
    font-size: 14px;
    text-decoration: none;
    transition: color 0.3s ease;
}

.forgot-password a:hover {
    color: #764ba2;
}

.login-button {
    width: 100%;
    padding: 15px;
    border: none;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(118, 75, 162, 0.4);
}

.login-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(118, 75, 162, 0.6);
}

.login-button:active {
    transform: translateY(0);
}

.signup-link {
    text-align: center;
    margin-top: 30px;
    color: #666;
    font-size: 14px;
}

.signup-link a.signup-text {
    color: inherit;
    font-weight: normal;
    text-decoration: none;
}

.social-login {
    display: flex;
    justify-content: center;
    margin-top: 30px;
    gap: 15px;
}

.social-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.social-icon:hover {
    transform: translateY(-5px);
}

.facebook {
    background-color: #3b5998;
}

.google {
    background-color: #db4437;
}

.twitter {
    background-color: #1da1f2;
}

.error-message {
    color: #e74c3c;
    font-size: 14px;
    margin-top: 5px;
    display: none;
}

.circles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

.circles li {
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
    animation: animate 25s linear infinite;
    bottom: -150px;
    border-radius: 50%;
}

.circles li:nth-child(1) {
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}

.circles li:nth-child(2) {
    left: 10%;
    width: 20px;
    height: 20px;
    animation-delay: 2s;
    animation-duration: 12s;
}

.circles li:nth-child(3) {
    left: 70%;
    width: 20px;
    height: 20px;
    animation-delay: 4s;
}

.circles li:nth-child(4) {
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 18s;
}

.circles li:nth-child(5) {
    left: 65%;
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}

.circles li:nth-child(6) {
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 3s;
}

.circles li:nth-child(7) {
    left: 35%;
    width: 150px;
    height: 150px;
    animation-delay: 7s;
}

.circles li:nth-child(8) {
    left: 50%;
    width: 25px;
    height: 25px;
    animation-delay: 15s;
    animation-duration: 45s;
}

.circles li:nth-child(9) {
    left: 20%;
    width: 15px;
    height: 15px;
    animation-delay: 2s;
    animation-duration: 35s;
}

.circles li:nth-child(10) {
    left: 85%;
    width: 150px;
    height: 150px;
    animation-delay: 0s;
    animation-duration: 11s;
}

@keyframes animate {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }
    100% {
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }
}

@media (max-width: 480px) {
    .login-container {
        padding: 30px 20px;
    }
    
    .login-header h1 {
        font-size: 24px;
    }
}

JS

document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('loginForm');
    const emailInput = document.getElementById('email');
    const passwordInput = document.getElementById('password');
    const emailError = document.getElementById('email-error');
    const passwordError = document.getElementById('password-error');

// Floating label functionality
    const inputs = document.querySelectorAll('.input-group input');
    inputs.forEach(input => {
        input.addEventListener('focus', function() {
            this.parentNode.querySelector('label').classList.add('active');
        });
        
        input.addEventListener('blur', function() {
            if (this.value === '') {
                this.parentNode.querySelector('label').classList.remove('active');
            }
        });
        
        // Initialize labels if inputs have values
        if (input.value !== '') {
            input.parentNode.querySelector('label').classList.add('active');
        }
    });

// Form validation
    form.addEventListener('submit', function(e) {
        e.preventDefault();
        let isValid = true;

// Email validation
        if (!validateEmail(emailInput.value)) {
            emailError.style.display = 'block';
            emailInput.parentNode.classList.add('error');
            isValid = false;
        } else {
            emailError.style.display = 'none';
            emailInput.parentNode.classList.remove('error');
        }

// Password validation
        if (passwordInput.value.length < 6) {
            passwordError.style.display = 'block';
            passwordInput.parentNode.classList.add('error');
            isValid = false;
        } else {
            passwordError.style.display = 'none';
            passwordInput.parentNode.classList.remove('error');
        }

if (isValid) {
            // Simulate successful login
            document.querySelector('.login-button').textContent = 'Logging in...';
            
            setTimeout(() => {
                alert('Login successful!');
                form.reset();
                document.querySelector('.login-button').textContent = 'Login';
                
                // Remove active class from labels
                inputs.forEach(input => {
                    input.parentNode.querySelector('label').classList.remove('active');
                });
            }, 1500);
        }
    });

function validateEmail(email) {
        const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return re.test(email);
    }

// Add ripple effect to login button
    const loginButton = document.querySelector('.login-button');
    loginButton.addEventListener('click', function(e) {
        const x = e.clientX - e.target.getBoundingClientRect().left;
        const y = e.clientY - e.target.getBoundingClientRect().top;
        
        const ripple = document.createElement('span');
        ripple.classList.add('ripple');
        ripple.style.left = `${x}px`;
        ripple.style.top = `${y}px`;
        
        this.appendChild(ripple);
        
        setTimeout(() => {
            ripple.remove();
        }, 1000);
    });
});

Recomendado

Plantilla de formulario de inicio de sesión HTML

Conexión de formulario a base de datos con Php

Un código de pivete290

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS