Modelo HTML de formulário de login Cyberpunk

790 codex

Abrir no Editor Video Publique Seu Código

Modelo HTML de formulário de login Cyberpunk

Recomendado

16 November 2024

Cartão Gradiente HTML

18 October 2024

Modelo de site de portfólio HTML CSS

29 June 2025

Power Gym: Modelo HTML de condicionamento físico, treinamento e aulas

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cyberpunk Login</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Rajdhani:wght@300;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="scene">
        <div class="login-card">
            <div class="card-header">
                <h1 class="glitch" data-text="SYSTEM_ACCESS">SYSTEM_ACCESS</h1>
            </div>
            <form class="login-form">
                <div class="input-group">
                    <input type="text" required id="username" autocomplete="off">
                    <label for="username">IDENTITY</label>
                    <div class="bar"></div>
                </div>
                <div class="input-group">
                    <input type="password" required id="password" autocomplete="off">
                    <label for="password">PASSPHRASE</label>
                    <div class="bar"></div>
                </div>
                <button type="submit" class="cyber-btn">
                    <span class="btn-content">INITIALIZE_LINK</span>
                    <span class="glitch-effect"></span>
                </button>
            </form>
            <div class="card-footer">
                <p>SECURE CONNECTION: <span class="status">ESTABLISHED</span></p>
            </div>
        </div>
        <div class="particles"></div>
    </div>
</body>
</html>

CSS

:root {
    --neon-cyan: #00f3ff;
    --neon-pink: #ff00ff;
    --dark-bg: #050505;
    --card-bg: rgba(10, 10, 10, 0.6);
    --text-main: #e0e0e0;
    --font-display: 'Orbitron', sans-serif;
    --font-body: 'Rajdhani', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--dark-bg);
    color: var(--text-main);
    font-family: var(--font-body);
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-image: 
        radial-gradient(circle at 50% 50%, #1a1a1a 0%, #000 100%),
        linear-gradient(0deg, rgba(0, 243, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 243, 255, 0.03) 1px, transparent 1px);
    background-size: 100% 100%, 40px 40px, 40px 40px;
    perspective: 1000px;
}

.scene {
    transform-style: preserve-3d;
    animation: float 6s ease-in-out infinite;
}

.login-card {
    position: relative;
    width: 380px;
    padding: 40px;
    background: var(--card-bg);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 243, 255, 0.2);
    box-shadow: 
        0 0 20px rgba(0, 243, 255, 0.1),
        inset 0 0 20px rgba(0, 243, 255, 0.05);
    transform: rotateX(5deg) rotateY(5deg);
    transition: transform 0.3s ease;
    clip-path: polygon(
        0 0, 
        100% 0, 
        100% 85%, 
        90% 100%, 
        0 100%
    );
}

.login-card::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, var(--neon-cyan), transparent, var(--neon-pink));
    z-index: -1;
    clip-path: polygon(
        0 0, 
        100% 0, 
        100% 85%, 
        90% 100%, 
        0 100%
    );
    opacity: 0.3;
}

.login-card:hover {
    transform: rotateX(0deg) rotateY(0deg) scale(1.02);
    box-shadow: 
        0 0 30px rgba(0, 243, 255, 0.2),
        inset 0 0 30px rgba(0, 243, 255, 0.1);
}

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

h1.glitch {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    color: var(--neon-cyan);
    position: relative;
    text-shadow: 2px 2px var(--neon-pink);
}

h1.glitch::before, h1.glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--dark-bg);
}

h1.glitch::before {
    left: 2px;
    text-shadow: -1px 0 var(--neon-pink);
    clip: rect(24px, 550px, 90px, 0);
    animation: glitch-anim-2 3s infinite linear alternate-reverse;
}

h1.glitch::after {
    left: -2px;
    text-shadow: -1px 0 var(--neon-cyan);
    clip: rect(85px, 550px, 140px, 0);
    animation: glitch-anim 2.5s infinite linear alternate-reverse;
}

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

input {
    width: 100%;
    padding: 10px 0;
    font-size: 1.1rem;
    color: var(--text-main);
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    outline: none;
    font-family: var(--font-body);
    letter-spacing: 1px;
    transition: 0.3s;
}

label {
    position: absolute;
    top: 10px;
    left: 0;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.5);
    pointer-events: none;
    transition: 0.3s;
    font-family: var(--font-display);
    font-size: 0.8rem;
}

input:focus ~ label,
input:valid ~ label {
    top: -20px;
    color: var(--neon-cyan);
    font-size: 0.7rem;
}

.bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--neon-cyan);
    transition: 0.3s;
    box-shadow: 0 0 10px var(--neon-cyan);
}

input:focus ~ .bar,
input:valid ~ .bar {
    width: 100%;
}

.cyber-btn {
    width: 100%;
    padding: 15px;
    background: transparent;
    border: 1px solid var(--neon-cyan);
    color: var(--neon-cyan);
    font-family: var(--font-display);
    font-size: 1rem;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: 0.3s;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 10px;
}

.cyber-btn:hover {
    background: rgba(0, 243, 255, 0.1);
    box-shadow: 0 0 20px rgba(0, 243, 255, 0.4);
    text-shadow: 0 0 5px var(--neon-cyan);
}

.cyber-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 243, 255, 0.4), transparent);
    transition: 0.5s;
}

.cyber-btn:hover::before {
    left: 100%;
}

.card-footer {
    margin-top: 30px;
    text-align: center;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.4);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 15px;
}

.status {
    color: var(--neon-pink);
    animation: blink 2s infinite;
}

/* Animations */
@keyframes float {
    0%, 100% { transform: translateY(0) rotateX(5deg) rotateY(5deg); }
    50% { transform: translateY(-10px) rotateX(5deg) rotateY(5deg); }
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes glitch-anim {
    0% { clip: rect(30px, 9999px, 10px, 0); }
    20% { clip: rect(80px, 9999px, 90px, 0); }
    40% { clip: rect(10px, 9999px, 50px, 0); }
    60% { clip: rect(60px, 9999px, 20px, 0); }
    80% { clip: rect(20px, 9999px, 70px, 0); }
    100% { clip: rect(90px, 9999px, 30px, 0); }
}

@keyframes glitch-anim-2 {
    0% { clip: rect(60px, 9999px, 20px, 0); }
    20% { clip: rect(10px, 9999px, 50px, 0); }
    40% { clip: rect(90px, 9999px, 30px, 0); }
    60% { clip: rect(30px, 9999px, 10px, 0); }
    80% { clip: rect(70px, 9999px, 20px, 0); }
    100% { clip: rect(20px, 9999px, 80px, 0); }
}

/* Responsive */
@media (max-width: 480px) {
    .login-card {
        width: 90%;
        margin: 20px;
    }
}

Recomendado

Cartão Gradiente HTML

Modelo de site de portfólio HTML CSS

Power Gym: Modelo HTML de condicionamento físico, treinamento e aulas

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS