Create Animated Login Signup form using HTML CSS JS

Looking for a sleek and professional way to implement a login and signup form UI? In this post, we’ll walk through a fully interactive and animated login signup form design using HTML, CSS and JavaScript. This modern UI features form transitions, social login icons and smooth user interaction — perfect for modern websites, web apps or admin dashboards.

Let’s break down the code for this animated login signup form step-by-step.

HTML Structure

We begin by laying out the core markup for our responsive login signup form. Two forms—login-form and signup-form—sit in a single .form-container. Floating‑label inputs, social‑media buttons and toggle links give users every option they need.

<div id="main-container">
        <div class="form-container">
            <div class="login-form">
                <div class="title">LOGIN</div>
                <form>
                    <div class="field">
                        <input type="email" id="email-address" placeholder=" " required autocomplete="on">
                        <label for="email-address">Email</label>
                        <i class="fa fa-envelope"></i>
                    </div>

                    <div class="field">
                        <input type="password" id="create-pass" required placeholder=" " autocomplete="on">
                        <label for="create-pass">Password</label>
                        <i class="fa fa-lock"></i>
                    </div>

                    <section>
                        <label for="remember"><input type="checkbox" id="remember">Remember Me</label>
                        <a href="#">Forget Password?</a>
                    </section>

                    <button class="login-btn">Login</button>
                </form>

                <div class="bottom">
                    <div class="other">
                        <div class="separator">Or</div>
                        <div class="alternatives">
                            <a href="#"><span class="fab fa-google"></span></a>
                            <a href="#"><span class="fab fa-dropbox"></span></a>
                            <a href="#"><span class="fab fa-github"></span></a>
                            <a href="#"><span class="fab fa-microsoft"></span></a>
                            <a href="#"><span class="fab fa-linkedin"></span></a>
                        </div>
                    </div>
                    <div>Don't have an Account?&nbsp;<a class="signup-switch" onclick="swapPos(this)">Sign up</a></div>
                </div>
            </div>
            <div class="signup-form">
                <div class="title">SIGN UP</div>
                <form>
                    <div class="field">
                        <input type="text" id="name" placeholder=" " required>
                        <label for="name">Name</label>
                        <i class="fa fa-user"></i>
                    </div>

                    <div class="field">
                        <input type="email" id="user-email" placeholder=" " required autocomplete="on">
                        <label for="user-email">Email</label>
                        <i class="fa fa-envelope"></i>
                    </div>

                    <div class="field">
                        <input type="password" id="password" required placeholder=" " autocomplete="off">
                        <label for="password">Password</label>
                        <i class="fa fa-lock"></i>
                    </div>

                    <div class="field">
                        <input type="password" id="confirm-pass" required placeholder=" " autocomplete="off">
                        <label for="confirm-pass">Confirm Password</label>
                        <i class="fa fa-lock"></i>
                    </div>

                    <section>
                        <label for="agree"><input type="checkbox" id="agree">I agree to all&nbsp;<a href="#">Terms &
                                Conditions</a></label>
                    </section>
                    <button class="signup-btn">Register</button>
                </form>

                <div class="bottom">
                    <span>Already Registered?&nbsp;<a class="login-switch" onclick="swapPos(this)">Login</a></span>
                </div>
            </div>
        </div>
</div>

• #main-container centers everything and ensures the responsive login UI stays fixed even on small screens.
• .form-container is given perspective so its children can animate in 3‑D, making the animated login signup form feel like flipping cards.
• Each .field holds an <input>, a <label> that floats up when the input is filled and an <i> Font Awesome icon for clarity.
• Social links are grouped in .alternatives; they’ll later get colored gradients via CSS for Google, GitHub, LinkedIn and more.
• Toggle anchors with signup-switch and login-switch let JavaScript flip the two forms without reloading the page.

With the markup complete, we have a semantic skeleton ready for styling. All crucial elements—titles, floating labels, social buttons—are in place for the next step: turning this into a modern signup form design with eye‑catching CSS.

Styling with CSS

Styling transforms the plain markup into a sleek, animated login signup form UI. We’ll add 3‑D depth with transform-style: preserve-3d, floating‑label transitions, vibrant social‑icon gradients and @keyframes that slide cards above or below each other.

@import url('https://use.fontawesome.com/releases/v5.12.0/css/all.css');

input:focus {
    outline: none;
}

input[type=checkbox] {
    margin-right: 5px;
    cursor: pointer;
    width: auto;
}

a {
    text-decoration: none;
    color: rgb(53, 41, 161);
    cursor: pointer;
}

a:hover {
    text-decoration: underline;
}

#main-container {
    min-width: 450px;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family:"calibri";
}

.form-container {
    width: 400px;
    height: 500px;
    position: relative;
    perspective: 1000px;
    transform-style: preserve-3d;
}

.login-form,
.signup-form {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 20px;
    overflow: hidden;
    text-align: center;
    position: absolute;
    border-radius: 20px;
    background: rgb(253, 253, 253);
    animation: .8s ease-in-out forwards
}

.login-form {
    transform: translate3d(0px, 0, 0px);
}

.signup-form {
    transform: translate3d(0px, 0, -200px);
}

.login-form::before,
.signup-form::before {
    content: "";
    position: absolute;
    left: -50%;
    bottom: -5%;
    z-index: -1;
    width: 100%;
    height: 100%;
    border-radius: 30px;
    transform: rotate(45deg);
    background-color: rgba(214, 214, 214, 0.24);
}

.title {
    font-size: 30px;
}

form {
    display: flex;
    flex-direction: column;
}

.field {
    position: relative;
    margin-top: 50px;
}

form input {
    border: none;
    border-bottom: 1px solid black;
    background: transparent;
    width: 100%;
    padding: 0 30px 5px 0;
}

.field label {
    left: 0;
    bottom: 5px;
    cursor: text;
    transition: .3s;
    position: absolute;
}

.field .fa {
    right: 1%;
    top: 0;
    position: absolute;
}

.field input:focus+label,
.field input:not(:placeholder-shown)+label {
    bottom: 25px;
}

section {
    display: flex;
    justify-content: space-between;
    margin: 5px 0 50px 0;
    font-size: 15px;
}

section label {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.856);
}

button {
    position: absolute;
    font-size: 2rem;
}

.login-btn,
.signup-btn {
    width: 100%;
    border: none;
    font-size: 20px;
    position: relative;
    cursor: pointer;
    border-radius: 10px;
    transition: .3s;
    color: white;
    background: #1a1a1a;
    padding: 5px;
}

.login-btn {
    margin: 0 0 35px 0;
}

.login-btn:hover,
.signup-btn:hover {
    opacity: .9;
}

.bottom {
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.other {
    margin: 10px 0 30px;
}

.separator {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    gap: 10px;
}

.separator::before,
.separator::after {
    content: '';
    background: rgba(0, 0, 0, 0.349);
    width: 40%;
    height: 1px;
}

.alternatives span {
    margin: 0 2px;
    cursor: pointer;
    transition: .3s;
    font-size: 25px;
    padding: 10px;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.alternatives span:hover {
    transform: scale(0.9);
}

.fa-google {
    background: conic-gradient(from -45deg, #ea4335 110deg, #4285f4 90deg 180deg, #34a853 180deg 270deg, #fbbc05 270deg) 73% 55%/150% 150% no-repeat;
}

.fa-microsoft {
    background: conic-gradient(from -90deg, #f44336 90deg, #4caf50 90deg 180deg, #2196f3 180deg 270deg, #ffc107 270deg) 50% 50%/100% 150% no-repeat;
}

.fa-dropbox {
    background: #3d9ae8;
}

.fa-linkedin {
    background: rgb(17, 98, 190);
}

.signup-form .field {
    margin-top: 40px;
}

.fa-github {
    background: #000;
}

.signup-form section {
    margin: 20px 0 10px 0;
}

.signup-btn {
    margin: 20px 0;
}

.signup-form .bottom {
    justify-content: flex-end;
    margin-top: 20px;
}

.above {
    animation-name: above;
}

.below {
    animation-name: below;
}

@keyframes above {
    0% {
        transform: translate3d(0, 0, -500px);
    }

    50% {
        transform: translate3d(70%, 0, -100px);
    }

    100% {
        transform: translate3d(0px, 0, 0px);
    }
}

@keyframes below {
    0% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(-70%, 0, 0px);
    }

    100% {
        transform: translate3d(0px, 0, -200px);
    }
}

• The core CSS sets perspective: 1000px on .form-container, enabling a realistic flip between login and signup cards.
• Each form starts at a different Z‑depth: login at z=0, signup at z=-200px.
• .field label floats upward when its input is active, creating a polished floating label login field.
• .login-btn and .signup-btn share styles for consistency, with a hover opacity tweak.
• Social icons use gradient backgrounds that shine through transparent Font Awesome glyphs (background-clip: text effect), capturing attention in any modern signup form design.
• @keyframes above brings a form from deep (-500 px) to front (0 px) with a side slide, while below pushes the other form back. These animations make the animated login signup form feel smooth and dynamic.

By marrying floating labels, gradient icons and 3‑D transforms, the CSS delivers a rich user experience while remaining lightweight—ideal for any responsive login UI or signup screen.

JavaScript Functionality

To enable seamless switching between animated login signup form, we use JavaScript to toggle the form visibility and handle animation classes dynamically.

const loginForm = document.querySelector('.login-form');
const signupForm = document.querySelector('.signup-form');

function swapPos(btn) {
    const isSignupSwitch = btn.classList.contains('signup-switch');
    signupForm.classList.toggle('above', isSignupSwitch);
    loginForm.classList.toggle('above', !isSignupSwitch);
    signupForm.classList.toggle('below', !isSignupSwitch);
    loginForm.classList.toggle('below', isSignupSwitch);
}

This script listens for the Sign up/Login switch clicks and uses CSS animations (above/below classes) to show or hide the corresponding form smoothly.

Use Cases of this animated Login Signup Form

• User Authentication Pages
• Admin Panels & Dashboards
• Web Apps or SaaS Products
• Portfolio or Blog Registration

The design is easily customizable — you can adapt color themes, icons or animations to match your brand style.

Final Thoughts

This animated Login Signup form UI is a perfect addition to any modern website or app. Using just HTML, CSS and JavaScript, we built a professional and fully functional UI component with floating labels, social login buttons and form transitions.

Live Preview