Login form css 🔥🔥. Amazing animation You have never seen it before.
Tags: uiweekly, webdev, beginners, ux
Published: 2021-05-17 13:17:46

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

{% codepen https://codepen.io/kunaal_kumar/pen/MWpjwor %}

>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. 

{% youtube R_MutcGu_xE %}

>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 

```HTML
<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.
```CSS
*{
    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
```HTML
<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.
```CSS
.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.
```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](https://github.com/kunaal438/login-register-form-ux), [My youtube Channel](https://www.youtube.com/c/TechyProgrammers/), [Instagram](https://www.instagram.com/techy_programmers/)