Design de formulário de login animado em CSS

501 codex

Abrir no Editor Publique Seu Código

Design de formulário de login animado em CSS

Recomendado

14 October 2025

Estrutura HTML de animação de carregamento CSS

9 September 2025

Trecho de animação de carregamento CSS

16 January 2026

Jogo do Motor Funkin' Kade de Sexta à Noite

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modern Login</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;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: #1c1c1c;
            /* Deep dark background */
            overflow: hidden;
        }

/* The container for the spinning effect */
        .box {
            position: relative;
            width: 380px;
            height: 420px;
            background: #1c1c1c;
            border-radius: 8px;
            overflow: hidden;
        }

/* The spinning gradient beam */
        .box::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 380px;
            height: 420px;
            background: linear-gradient(0deg, transparent, transparent, #45f3ff, #45f3ff, #45f3ff);
            z-index: 1;
            transform-origin: bottom right;
            animation: animate 6s linear infinite;
        }

/* The second beam for color contrast (Magenta) */
        .box::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 380px;
            height: 420px;
            background: linear-gradient(0deg, transparent, transparent, #ff2770, #ff2770, #ff2770);
            z-index: 1;
            transform-origin: bottom right;
            animation: animate 6s linear infinite;
            animation-delay: -3s;
            /* Delays it to be on the opposite side */
        }

/* The inner form container overlay */
        .form-content {
            position: absolute;
            inset: 4px;
            /* Creates the border thickness */
            background: #222;
            /* Slightly lighter than body */
            padding: 50px 40px;
            border-radius: 8px;
            z-index: 2;
            display: flex;
            flex-direction: column;
        }

@keyframes animate {
            0% {
                transform: rotate(0deg);
            }

100% {
                transform: rotate(360deg);
            }
        }

h2 {
            color: #fff;
            font-weight: 500;
            text-align: center;
            letter-spacing: 0.1em;
        }

/* Input Styling with Floating Animation */
        .inputBox {
            position: relative;
            width: 100%;
            margin-top: 35px;
        }

.inputBox input {
            position: relative;
            width: 100%;
            padding: 20px 10px 10px;
            background: transparent;
            outline: none;
            border: none;
            box-shadow: none;
            color: #23242a;
            font-size: 1em;
            letter-spacing: 0.05em;
            transition: 0.5s;
            z-index: 10;
        }

.inputBox span {
            position: absolute;
            left: 0;
            padding: 20px 0px 10px;
            pointer-events: none;
            color: #8f8f8f;
            font-size: 1em;
            letter-spacing: 0.05em;
            transition: 0.5s;
        }

/* Logic for floating label */
        .inputBox input:valid~span,
        .inputBox input:focus~span {
            color: #fff;
            font-size: 0.75em;
            transform: translateY(-34px);
        }

/* The animated underline */
        .inputBox i {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 2px;
            background: #fff;
            border-radius: 4px;
            overflow: hidden;
            transition: 0.5s;
            pointer-events: none;
        }

.inputBox input:valid~i,
        .inputBox input:focus~i {
            height: 44px;
            /* Expands to fill background */
        }

/* Links styling */
        .links {
            display: flex;
            justify-content: space-between;
        }

.links a {
            margin: 10px 0;
            font-size: 0.75em;
            color: #8f8f8f;
            text-decoration: none;
        }

.links a:hover,
        .links a:nth-child(2) {
            color: #fff;
        }

/* Submit Button */
        input[type="submit"] {
            border: none;
            outline: none;
            padding: 9px 25px;
            background: #fff;
            cursor: pointer;
            font-size: 0.9em;
            border-radius: 4px;
            font-weight: 600;
            width: 100px;
            margin-top: 10px;
        }

input[type="submit"]:active {
            opacity: 0.8;
        }

/* The Glow Effect behind the box */
        .border-line {
            position: absolute;
            top: 0;
            inset: 0;
        }

/* Adds a subtle pulse to the form */
        .box:hover .form-content {
            background: #25252b;
            transition: 0.5s;
        }
    </style>
</head>

<body>

<div class="box">
        <div class="form-content">
            <h2>Sign In</h2>
            <form>
                <div class="inputBox">
                    <input type="text" required="required">
                    <span>Username</span>
                    <i></i>
                </div>
                <div class="inputBox">
                    <input type="password" required="required">
                    <span>Password</span>
                    <i></i>
                </div>
                <div class="links">
                    <a href="#">Forgot Password</a>
                    <a href="#">Signup</a>
                </div>
                <input type="submit" value="Login">
            </form>
        </div>
    </div>

</body>

</html>

Recomendado

Estrutura HTML de animação de carregamento CSS

Trecho de animação de carregamento CSS

Jogo do Motor Funkin' Kade de Sexta à Noite

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS