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.


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




Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

JS Technical Interview: Frontend Amazon Engineer

Developer Interview Question: What is the Browser Object Model?

When I was trying to install a reactjs web application, an error occurred.

Build PWA with Gatsby

Hot Reload Node Cloud Functions

React/Rails Full Auth From Scratch using (JWT) Part I

Tired of long relative imports in JS?

Javascript Strings

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nabendu Biswas

Nabendu Biswas

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger

More from Medium

CSS Basics #4: Grid System and Responsive Design

How to add preloader to your HTML page

Sorting/Rearranging HTML elements using jQuery UI — A Small Guide With Example

sortable / rearranged divs using jquery with placeholder

Day 2: CSS Basics