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

Making WebSocket in Sync With User Internet Connectivity in React Using Redux Part 2

React Redux

Next js custom server for running the client and server in same domain for development process.

What’s react-bootstrap and How to use it?

Intro to Custom Snippets in VS Code

Eyeglasses in front of several screens covered with computer code

How-To: A Simple Carousel With Vue!

Chalk Update 1.53.0 — Display Current Location and Other Discovery Optimisations

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

Day 2: CSS Basics

DOM Manipulation: Simple Click Counter

CSS Basics #4: Grid System and Responsive Design

Bootstrap 5 — Adding it to your page