Hello, glad you are here. I am kunaal and today we will make an awesome login and register form with great transition. You can see demo below.

Demo

This is responsive login form. To see desktop effect click on 0.5 scale for mobile view click on 1 scale.

Video Tutorial -

If you find this article hard or for better explanation. You can watch video tutorial.

If you like the video tutorial. Please consider subscribing my youtube channel.

Let's code

Create 3 files index.html, style.css, and app.js.
After that in index.html inside body tag type this

<div class="form-parent">
        <div class="sign-up-img"></div>
        <div class="sign-in-img"></div>
</div>

These .sign-in-img and .sign-up-img will be our images for forms.
Now add some style.

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

*:focus{
    outline: none;
}

body{
    width: 100%;
    height: 100vh;
    min-height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #111;
    font-family: 'roboto', sans-serif;
}

.form-parent{
    width: 850px;
    height: 500px;
    background: #171717;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.75);
}

.sign-up-img,
.sign-in-img{
    position: absolute;
    width: 50%;
    height: 100%;
    background: url(img/sign-up.jpeg);
    background-size: cover;
}

.sign-in-img{
    left: 50%;
    background: url(img/sign-in.jpeg);
    background-size: cover;
}

This is easy to understand CSS. If you have any doubt ask me in comment.
Now in index.html inside .form-parent element type

<div class="form-container">
    <div class="form" id="sign-in-form">
        <h1 class="title">sign in</h1>
        <div class="fields">
            <input type="text" placeholder="username">
            <input type="password" placeholder="password">
        </div>
        <div class="submit-container">
            <button type="submit" class="btn">sign in</button>
            <p class="link" onclick="switchForm('register')">new here ? sign up here</p>
        </div>
    </div>
    <div class="form" id="sign-up-form">
        <h1 class="title">sign up</h1>
        <div class="fields">
            <input type="text" placeholder="name">
            <input type="text" placeholder="username">
            <input type="email" placeholder="email">
            <input type="password" placeholder="password">
        </div>
        <div class="submit-container">
            <button type="submit" class="btn">sign up</button>
            <p class="link" onclick="switchForm('login')">already have an account ? sign in here</p>
        </div>
    </div>
</div>

This is our form structure. You can see that we are calling a switchForm function on click that we will create later.

Now style.

.form-container{
    position: relative;
    width: 50%;
    min-width: 300px;
    height: 100%;
    background: #171717;
    transition: 1s;
    left: 0;
    display: grid;
    overflow: hidden;
    grid-template-columns: repeat(2, calc(850px/2));
}

.form{
    width: 100%;
    height: 100%;
    padding: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    transition: 1s;
}

.title{
    width: 100%;
    text-align: center;
    font-size: 60px;
    font-weight: 500;
    text-transform: capitalize;
    color: #fff;
}

.fields,
.submit-container{
    position: relative;
    width: 100%;
}

input{
    display: block;
    width: 100%;
    margin-bottom: 30px;
    padding: 5px 10px;
    text-transform: capitalize;
    border: none;
    border-radius: 5px;
    height: 30px;
    background: #0d0d0d;
    color: #fff;
}

::placeholder{
    color: #3f3f3f;
}

.btn{
    color: #fff;
    background: #0d0d0d;
    border: none;
    padding: 10px 40px;
    font-size: 15px;
    text-transform: capitalize;
    display: block;
    margin: auto;
    color: #3f3f3f;
    cursor: pointer;
    border-radius: 10px;
    margin-bottom: 20px;
    transition: .5s;
}

.btn:hover,
input:focus{
    background: #000;
    color: #fff;
}

.link{
    text-align: center;
    color: #3f3f3f;
    text-transform: capitalize;
    text-decoration: underline;
    cursor: pointer;
    transition: .5s;
}

.link:hover{
    color: #fff;
}

#sign-up-form{
    margin-left: 50%;
}

#sign-up-form .title{
    margin-bottom: 30px;
}

@media screen and (max-width : 800px){
    .form-parent{
        width: 50vw;
        min-width: 300px;
        overflow: hidden;
    }
    .form-container{
        width: 100%;
        grid-template-columns: repeat(2, 100%);
    }
    .sign-up-img,
    .sign-in-img{
        display: none;
    }
}

Our style are done and we also added media query here for the responsiveness.

Now it's time for JS.

const formContainer = document.querySelector('.form-container');
const loginForm = document.querySelector('#sign-in-form');
const registerFrom = document.querySelector('#sign-up-form');

const switchForm = (form) => {
    if(form == 'register'){
        if(window.innerWidth > 800){
            formContainer.style.left = `50%`;
        }
        loginForm.style.marginLeft = `-150%`;
        registerFrom.style.marginLeft = `-100%`;
    } else{
        if(window.innerWidth > 800){
            formContainer.style.left = `0%`;
        }
        loginForm.style.marginLeft = `0%`;
        registerFrom.style.marginLeft = `50%`;
    }
}

And there we go our, form is ready.

I hope you understood everything. If you have any doubt or you find any mistake that I made or you have any suggestion feel free to ask me in comment.

If you are interested in programming and want to know how I a 15yr old teen do coding make these design. You can follow me on my Instagram. I am also planning to post my game development stuff on Instagram.

Souce Code, My youtube Channel, Instagram

Blog

Login form css 🔥🔥. Amazing animation You have never seen it before.

Modern Web

Demo

Video Tutorial -

Let's code

Join Our Newsletter. No Spam, Only the good stuff.

Related