back to all posts

Beautiful Login and Registration Form

by Nabendu Biswas / November 27th, 2021

#html #beginners #css

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.


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


Now, our nice background image is been shown.

Background imageBackground image

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


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


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


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


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


Now, our social icons and button is looking perfect in 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.


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.

    top: 180px;
    position: absolute;
    width: 280px;
    transition: 0.5s;
    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;
    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;
    margin: 30px 10px 30px 0;
    color: #777;
    font-size: 12px;
    bottom: 68px;
    position: absolute;
    left: 50px;
    left: 450px;

Our localhost now looks like below.


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


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


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.


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

Complete AppComplete App

Nabendu Biswas