login moderno

1016 kevekıbhack

Abrir no Editor Publique Seu Código

Recomendado

14 May 2025

Formulário de login gradiente HTML CSS

19 October 2024

Formulário de login HTML animado

15 May 2025

Página de login

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>kevakibhack - Login</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    * {
      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: #0f222f;
      overflow: hidden;
    }

section {
      position: relative;
      width: 100%;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }

section span {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }

section span:nth-child(1) {
      clip-path: polygon(0 0, 20% 0, 40% 100%, 0% 100%);
      background: #ff3c3c;
      opacity: 0.8;
      animation: animate 15s linear infinite;
    }

section span:nth-child(2) {
      clip-path: polygon(20% 0, 40% 0, 60% 100%, 0% 100%);
      background: #00ff84;
      opacity: 0.8;
      animation: animate 25s linear infinite;
      animation-delay: -5s;
    }

section span:nth-child(3) {
      clip-path: polygon(40% 0, 60% 0, 80% 100%, 20% 100%);
      background: #ffcc00;
      opacity: 0.8;
      animation: animate 20s linear infinite;
      animation-delay: -10s;
    }

section span:nth-child(4) {
      clip-path: polygon(60% 0, 80% 0, 100% 100%, 40% 100%);
      background: #3c5cff;
      opacity: 0.8;
      animation: animate 30s linear infinite;
      animation-delay: -15s;
    }

@keyframes animate {
      0% {
        transform: translateY(-100%);
      }
      100% {
        transform: translateY(100%);
      }
    }

.signin {
      position: relative;
      z-index: 10;
      width: 380px;
      padding: 40px;
      background: rgba(255, 255, 255, 0.05);
      backdrop-filter: blur(10px);
      border-radius: 10px;
      box-shadow: 0 25px 45px rgba(0, 0, 0, 0.2);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-right: 1px solid rgba(255, 255, 255, 0.1);
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      overflow: hidden;
      transition: 0.5s;
    }

.signin:hover {
      transform: translateY(-10px);
      box-shadow: 0 35px 55px rgba(0, 0, 0, 0.3);
    }

.signin::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0.1);
      transform: skewX(-15deg);
      transition: 0.7s;
    }

.signin:hover::before {
      left: 120%;
    }

.signin .content {
      position: relative;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

.signin .content h2 {
      color: #fff;
      font-size: 2em;
      margin-bottom: 30px;
      text-transform: uppercase;
      letter-spacing: 2px;
      text-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    }

.signin .content .form {
      width: 100%;
    }

.signin .content .form .inputBox {
      position: relative;
      width: 100%;
      margin-bottom: 30px;
    }

.signin .content .form .inputBox input {
      width: 100%;
      padding: 10px 0;
      font-size: 16px;
      color: #fff;
      border: none;
      border-bottom: 1px solid #fff;
      outline: none;
      background: transparent;
      transition: 0.5s;
    }

.signin .content .form .inputBox input:focus,
    .signin .content .form .inputBox input:valid {
      border-bottom-color: #00ff84;
    }

.signin .content .form .inputBox i {
      position: absolute;
      left: 0;
      top: 10px;
      padding: 10px 0;
      font-style: normal;
      color: #fff;
      pointer-events: none;
      transition: 0.5s;
    }

.signin .content .form .inputBox input:focus ~ i,
    .signin .content .form .inputBox input:valid ~ i {
      transform: translateY(-20px);
      font-size: 12px;
      color: #00ff84;
    }

.signin .content .form .inputBox input[type="submit"] {
      background: #fff;
      color: #0f222f;
      border: none;
      padding: 12px;
      cursor: pointer;
      border-radius: 5px;
      font-weight: 600;
      letter-spacing: 1px;
      transition: 0.5s;
    }

.signin .content .form .inputBox input[type="submit"]:hover {
      background: #00ff84;
      color: #fff;
      box-shadow: 0 0 10px #00ff84, 0 0 20px #00ff84;
    }

.signin .content .form .links {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
    }

.signin .content .form .links a {
      color: #fff;
      text-decoration: none;
      font-size: 14px;
      transition: 0.5s;
    }

.signin .content .form .links a:hover {
      color: #00ff84;
      text-decoration: underline;
    }

/* Responsive design */
    @media (max-width: 480px) {
      .signin {
        width: 90%;
        padding: 30px 20px;
      }
      
      .signin .content h2 {
        font-size: 1.5em;
      }
    }

/* Social media icons */
    .social-icons {
      display: flex;
      justify-content: center;
      margin-top: 20px;
    }

.social-icons a {
      color: #fff;
      margin: 0 10px;
      font-size: 20px;
      transition: 0.3s;
    }

.social-icons a:hover {
      color: #00ff84;
      transform: translateY(-5px);
    }

/* Password toggle */
    .password-toggle {
      position: absolute;
      right: 0;
      top: 10px;
      cursor: pointer;
      color: #fff;
    }

/* Loading animation */
    .loader {
      display: none;
      width: 20px;
      height: 20px;
      border: 3px solid rgba(255, 255, 255, 0.3);
      border-radius: 50%;
      border-top-color: #00ff84;
      animation: spin 1s ease-in-out infinite;
      margin-left: 10px;
    }

@keyframes spin {
      to { transform: rotate(360deg); }
    }

/* Error message */
    .error-message {
      color: #ff3c3c;
      font-size: 14px;
      margin-top: -20px;
      margin-bottom: 20px;
      display: none;
    }
  </style>
</head>
<body>
  <section>
    <span></span>
    <span></span>
    <span></span>
    <span></span>

<div class="signin">
      <div class="content">
        <h2>Login</h2>
        <div class="form">
          <div class="inputBox">
            <input type="text" required id="username">
            <i>Username</i>
          </div>
          <div class="inputBox">
            <input type="password" required id="password">
            <i>Password</i>
            <span class="password-toggle" id="togglePassword">
              <i class="fas fa-eye"></i>
            </span>
          </div>
          <div class="error-message" id="errorMessage"></div>
          <div class="links">
            <a href="#">Forgot Password</a>
            <a href="#">Sign Up</a>
          </div>
          <div class="inputBox">
            <input type="submit" value="Login" id="loginBtn">
            <div class="loader" id="loader"></div>
          </div>
          <div class="social-icons">
            <a href="#"><i class="fab fa-google"></i></a>
            <a href="#"><i class="fab fa-facebook-f"></i></a>
            <a href="#"><i class="fab fa-twitter"></i></a>
            <a href="#"><i class="fab fa-linkedin-in"></i></a>
          </div>
        </div>
      </div>
    </div>
  </section>

// Form validation
      const loginForm = document.querySelector('.form');
      const username = document.querySelector('#username');
      const passwordInput = document.querySelector('#password');
      const errorMessage = document.querySelector('#errorMessage');
      const loginBtn = document.querySelector('#loginBtn');
      const loader = document.querySelector('#loader');

loginForm.addEventListener('submit', function(e) {
        e.preventDefault();
        
        // Show loading animation
        loginBtn.disabled = true;
        loader.style.display = 'inline-block';
        loginBtn.value = 'Logging in...';
        
        // Simulate API call
        setTimeout(function() {
          // Hide loading animation
          loader.style.display = 'none';
          loginBtn.disabled = false;
          loginBtn.value = 'Login';
          
          // Simple validation
          if(username.value.trim() === '' || passwordInput.value.trim() === '') {
            errorMessage.textContent = 'Please fill in all fields';
            errorMessage.style.display = 'block';
          } else if(passwordInput.value.length < 6) {
            errorMessage.textContent = 'Password must be at least 6 characters';
            errorMessage.style.display = 'block';
          } else {
            errorMessage.style.display = 'none';
            // Here you would typically send the data to your server
            alert('Login successful! Redirecting...');
            // window.location.href = 'dashboard.html';
          }
        }, 1500);
      });

// Input field animations
      const inputBoxes = document.querySelectorAll('.inputBox input');
      
      inputBoxes.forEach(input => {
        input.addEventListener('focus', function() {
          this.parentNode.querySelector('i').style.color = '#00ff84';
        });
        
        input.addEventListener('blur', function() {
          this.parentNode.querySelector('i').style.color = '#fff';
        });
      });

// Background animation
      const spans = document.querySelectorAll('section span');
      
      spans.forEach((span, index) => {
        span.style.animationDuration = `${15 + (index * 5)}s`;
        span.style.animationDelay = `${index * -5}s`;
      });
    });
  </script>
</body>
</html>

Recomendado

Formulário de login gradiente HTML CSS

Formulário de login HTML animado

Página de login

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS