Formulário de login incrível

522 hasan

Abrir no Editor Publique Seu Código

Recomendado

17 May 2025

social moderno

13 November 2024

Efeito de moldura em imagens usando CSS puro

16 January 2025

Pilotos de F1 2024 - galeria circular com polegares

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

social moderno

Efeito de moldura em imagens usando CSS puro

Pilotos de F1 2024 - galeria circular com polegares

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS