Login & Registration Form (HTML, CSS, JS)

Open In Editor Video Publish Your Code

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Giriş & Kayıt Formu</title>
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <style>
        @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 {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: #1c1c1c; /* Dark background for neon effect */
            overflow: hidden;
        }

/* Neon glow background effect */
        body::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 600px;
            height: 600px;
            background: linear-gradient(45deg, #ff003c, #ffdd00);
            border-radius: 50%;
            filter: blur(150px);
            opacity: 0.5;
        }

.container {
            position: relative;
            background: rgba(255, 255, 255, 0.05); /* Glassmorphism effect */
            border-radius: 20px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
            border: 1px solid rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            width: 700px;
            min-height: 450px;
            overflow: hidden; /* Hide overflowing toggle panel */
        }

.container p {
            color: #ccc;
            font-size: 14px;
            margin: 15px 0;
        }

.container a {
            color: #fff;
            font-size: 14px;
            text-decoration: none;
            margin: 15px 0;
            font-weight: 500;
        }

.container a:hover {
            text-decoration: underline;
        }

.container button {
            border-radius: 20px;
            border: 1px solid #ff003c;
            background-color: #ff003c;
            color: #ffffff;
            font-size: 12px;
            font-weight: bold;
            padding: 12px 45px;
            letter-spacing: 1px;
            text-transform: uppercase;
            cursor: pointer;
            transition: transform 80ms ease-in, background-color 0.3s ease, box-shadow 0.3s ease;
        }

.container button:active {
            transform: scale(0.95);
        }

.container button:focus {
            outline: none;
        }
        
        .container button:hover {
            background-color: #ffdd00;
            border-color: #ffdd00;
            color: #1c1c1c;
            box-shadow: 0 0 20px #ffdd00;
        }

.container button.ghost {
            background-color: transparent;
            border-color: #ffffff;
        }
        
        .container button.ghost:hover {
            background-color: #fff;
            color: #1c1c1c;
            box-shadow: 0 0 20px #fff;
        }

.container form {
            background: transparent;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            padding: 0 50px;
            height: 100%;
            text-align: center;
        }

.container input {
            background-color: rgba(255, 255, 255, 0.1);
            border: none;
            border-radius: 10px;
            padding: 12px 15px;
            margin: 8px 0;
            width: 100%;
            color: #fff;
            outline: none;
            border: 1px solid transparent;
            transition: border-color 0.3s ease;
        }

.container input::placeholder {
            color: #ccc;
        }

.container input:focus {
            border-color: #ffdd00;
        }

h1 {
            font-weight: bold;
            margin: 0;
            color: #fff;
            text-shadow: 0 0 10px #ff003c;
        }

.form-container {
            position: absolute;
            top: 0;
            height: 100%;
            transition: all 0.6s ease-in-out;
        }

.sign-in-container {
            left: 0;
            width: 50%;
            z-index: 2;
        }

.container.right-panel-active .sign-in-container {
            transform: translateX(100%);
            opacity: 0;
        }

.sign-up-container {
            left: 0;
            width: 50%;
            opacity: 0;
            z-index: 1;
        }

.container.right-panel-active .sign-up-container {
            transform: translateX(100%);
            opacity: 1;
            z-index: 5;
            animation: show 0.6s;
        }

@keyframes show {
            0%, 49.99% {
                opacity: 0;
                z-index: 1;
            }
            50%, 100% {
                opacity: 1;
                z-index: 5;
            }
        }

.overlay-container {
            position: absolute;
            top: 0;
            left: 50%;
            width: 50%;
            height: 100%;
            overflow: hidden;
            transition: transform 0.6s ease-in-out;
            z-index: 100;
        }

.container.right-panel-active .overlay-container {
            transform: translateX(-100%);
        }

.overlay {
            background: #ff003c;
            background: -webkit-linear-gradient(to right, #ffdd00, #ff003c);
            background: linear-gradient(to right, #ffdd00, #ff003c);
            background-repeat: no-repeat;
            background-size: cover;
            background-position: 0 0;
            color: #ffffff;
            position: relative;
            left: -100%;
            height: 100%;
            width: 200%;
            transform: translateX(0);
            transition: transform 0.6s ease-in-out;
        }

.container.right-panel-active .overlay {
            transform: translateX(50%);
        }

.overlay-panel {
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            padding: 0 40px;
            text-align: center;
            top: 0;
            height: 100%;
            width: 50%;
            transform: translateX(0);
            transition: transform 0.6s ease-in-out;
        }
        
        .overlay-panel h1 {
            text-shadow: none;
        }

.overlay-left {
            transform: translateX(-20%);
        }

.container.right-panel-active .overlay-left {
            transform: translateX(0);
        }

.overlay-right {
            right: 0;
            transform: translateX(0);
        }

.container.right-panel-active .overlay-right {
            transform: translateX(20%);
        }

.social-container {
            margin: 20px 0;
        }

.social-container a {
            border: 1px solid #dddddd;
            border-radius: 50%;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            margin: 0 5px;
            height: 40px;
            width: 40px;
            color: #fff;
            transition: all 0.3s ease;
        }

.social-container a:hover {
            color: #1c1c1c;
            background-color: #fff;
            border-color: #fff;
            transform: scale(1.1);
            box-shadow: 0 0 15px #fff;
        }
        
        /* Responsive Design */
        @media (max-width: 768px) {
            .container {
                width: 95%;
                max-width: 450px;
            }
            .overlay-container {
                display: none;
            }
            .form-container {
                width: 100%;
            }
            .sign-in-container {
                opacity: 1;
                z-index: 2;
            }
            .sign-up-container {
                opacity: 0;
                z-index: 1;
            }
            .container.right-panel-active .sign-in-container {
                transform: none;
                opacity: 0;
                z-index: 1;
            }
            .container.right-panel-active .sign-up-container {
                transform: none;
                opacity: 1;
                z-index: 2;
            }
            
            /* We will use JS to toggle a class for mobile view */
            .mobile-toggle-panel {
                display: block;
                padding: 20px;
                text-align: center;
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                background: rgba(0,0,0,0.3);
            }
        }
        
        @media (min-width: 769px) {
            .mobile-toggle-panel {
                display: none;
            }
        }

</style>
</head>
<body>

<div class="container" id="container">
        
        <div class="form-container sign-up-container">
            <form action="#">
                <h1>Hesap Oluştur</h1>
                <div class="social-container">
                    <a href="#" class="social"><i class="fab fa-facebook-f"></i></a>
                    <a href="#" class="social"><i class="fab fa-google-plus-g"></i></a>
                    <a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>
                </div>
                <p>veya kayıt için e-postanızı kullanın</p>
                <input type="text" placeholder="Adınız" />
                <input type="email" placeholder="E-posta" />
                <input type="password" placeholder="Şifre" />
                <a href="mailto:cengizalagoz60@gmail.com">Şifremi Unuttum</a>
                <button>Kayıt Ol</button>
            </form>
        </div>
        
        
        <div class="form-container sign-in-container">
            <form action="#">
                <h1>Giriş Yap</h1>
                <div class="social-container">
                    <a href="#" class="social"><i class="fab fa-facebook-f"></i></a>
                    <a href="#" class="social"><i class="fab fa-google-plus-g"></i></a>
                    <a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>
                </div>
                <p>veya hesabınızı kullanın</p>
                <input type="email" placeholder="E-posta" />
                <input type="password" placeholder="Şifre" />
                <a href="mailto:cengizalagoz60@gmail.com">Şifremi Unuttum</a>
                <button>Giriş Yap</button>
            </form>
        </div>
        
        
        <div class="overlay-container">
            <div class="overlay">
                <div class="overlay-panel overlay-left">
                    <h1>Tekrar Hoşgeldin!</h1>
                    <p>Giriş yapmak ve bizimle bağlantıda kalmak için lütfen kişisel bilgilerinizi girin.</p>
                    <button class="ghost" id="signIn">Giriş Yap</button>
                </div>
                <div class="overlay-panel overlay-right">
                    <h1>Merhaba!</h1>
                    <p>Kişisel bilgilerinizi girin ve bizimle yolculuğa başlayın.</p>
                    <button class="ghost" id="signUp">Kayıt Ol</button>
                </div>
            </div>
        </div>
        
        
        <div class="mobile-toggle-panel">
             <p id="mobile-text">Hesabın yok mu? <a href="#" id="mobile-toggle-btn">Kayıt Ol</a></p>
        </div>
    </div>

// Desktop toggle
        signUpButton.addEventListener('click', () => {
            container.classList.add("right-panel-active");
        });

signInButton.addEventListener('click', () => {
            container.classList.remove("right-panel-active");
        });
        
        // Mobile toggle
        mobileToggleBtn.addEventListener('click', (e) => {
            e.preventDefault();
            container.classList.toggle("right-panel-active");
            
            if (container.classList.contains("right-panel-active")) {
                mobileText.innerHTML = 'Zaten hesabın var mı? <a href="#" id="mobile-toggle-btn">Giriş Yap</a>';
            } else {
                mobileText.innerHTML = 'Hesabın yok mu? <a href="#" id="mobile-toggle-btn">Kayıt Ol</a>';
            }
            
            // Re-assign the event listener to the new link
            document.getElementById('mobile-toggle-btn').addEventListener('click', arguments.callee);
        });

</script>

</body>
</html>

Login & Registration Form (HTML, CSS, JS)

Recommended

Animated login form

HTML CSS Login Form Code

form githup gmail

HTML

CSS

JS

Recommended

Animated login form

HTML CSS Login Form Code

form githup gmail

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS