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

What is Application Framework?

Cinner the Conquerors — when our health campaign engages the athelete insides members

A little bit of JavaScript, Cache, and Testing


Let’s Start the journey with React fundamental Concept

How to link your Angular 9 WebApp to Firebase

Day 16: The useEffect Hook in React

How to Give Props Default Values in Vue.js

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

Top 4 important topics in CSS

Day 2: CSS Basics

How to add preloader to your HTML page

How to add Tailwind CSS to your HTML project

Tailwindcss plus html integration