Beautiful Login and Registration Form with HTML and CSS

Photo by XPS on Unsplash

In this post, we are going to create a beautiful Login and registration form with HTML and CSS.

So, open VSCode and create the basic structure of a HTML in an index.html file by ! and then pressing tab. We have also put an images in the images folder. You can take them from the github repo at the end.

index.html

Now, let’s put the style for the hero class in our linked style.css file. We are adding a background-image here.

style.css

Now, our nice background image is been shown.

Background image

Now, we will add the html for a button-box in our project, which will have two buttons with class of toggle-btn.

index.html

Next, in style.css file we are adding style for the form-box, button-box and the toggle-btn.

style.css

Now, our app have this beautiful form with two toggle button.

Form

Now, we will add a id of btn and social-icons in our index.html file.

index.html

Now, we will add styles for this btn and social-icons in our style.css file.

style.css

Now, our social icons and button is looking perfect in localhost.

localhost

Now, we will add the onclick handler to both buttons. We are also creating two forms, one for login and other for register.

We are also creating a script tag and attaching the main.js file in it, which we are going to use soon.

index.html

Now, we will add the styles for the form in style.css file. We are also using a trick at the end to move the register form out of the screen.

.input-group{
    top: 180px;
    position: absolute;
    width: 280px;
    transition: 0.5s;
}
.input-field{
    width: 100%;
    padding: 10px 0;
    margin: 5px 0;
    border-left: 0;
    border-top: 0;
    border-right: 0;
    border-bottom: 1px solid #999;
    outline: none;
    background: transparent;
}
.submit-btn{
    width: 85%;
    padding: 10px 30px;
    cursor: pointer;
    display: block;
    margin: auto;
    background: linear-gradient(to right, #ff105f, #ffad06);
    border: 0;
    outline: none;
    border-radius: 30px;
}
.check-box{
    margin: 30px 10px 30px 0;
}
span{
    color: #777;
    font-size: 12px;
    bottom: 68px;
    position: absolute;
}
#login{
    left: 50px;
}
#register{
    left: 450px;
}

Our localhost now looks like below.

localhost

Now, we will add the logic in our main.js to move the login and register form, once the use clicks on the buttons.

main.js

Now, our forms are moving fine on the click of the Login and Register buttons.

Forms

We just need to hide the form which is outside and we will do it by a cool trick of overflow: hidden in class form-box.

style.css

Our app is complete and the functionality is also working fine. You can find the code for the same in this github repo.

Complete App