Hello Coders, In this article we are going to learn How to build Login and Sign Up or Registration form using HTML and CSS. Its going to be a neumorphism design.
What is Neomorphism ?
You have heard this word right? So lets understand what it really is. Neomorphism is a new design trend and it has gained a lot of attention in a very short period of time. Its all about little contrast and solid colors. You can clearly see it in action in the below demo.
In this HTML and CSS Tutorial article, I have provided both video tutorial and a step by step guide on how to build Login and Registration page using HTML and CSS. And for your reference, I have also provided complete Free Source Code at the end of this article.
Login and Sign Up Form using HTML CSS and JavaScript | Video Tutorial
Watch the video tutorial if you are complete beginner or you are finding it hard to follow along with this article. In the video I have shown how to build it step by step.
Login and Registration Page in HTML CSS and JavaScript | Source Code
Now lets start building it. Follow the below steps to build it. You can have a look at the final demo if you are curios about how it is going to look once done.
How do I create Registration / Sign Up Page in HTML? Free HTML source code
Create an index.html file. and add the HTML boiler plate, meaning add the basic structure of an HTML document, like html, head, title, body tags. Create a main div in which it is going to hold our login form code and sign up form code. Once done follow the below steps.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Neumorphism Login Form</title>
</head>
<body>
<div class="main"></div>
</body>
</html>
Step 1 : Inside the index.html file. First lets add some html code for Registration or Sign Up. Lets create a separate form element and inside lets add some icons, like facebook, linkedin, twitter Icons. You can download the svg files from the link at the end of this article.
Once done, now we will add our input elements for name, email, password and also a button which says ‘SIGN UP’. Copy or refer below source code.
<div class="container a-container" id="a-container">
<form class="form" id="a-form" method="" action="">
<h2 class="title">Create Account</h2>
<div class="form__icons">
<img class="form__icon" src="svg/fb.svg" alt="" />
<img class="form__icon" src="svg/linkedin.svg" />
<img class="form__icon" src="svg/twitter.svg" />
</div>
<span class="form__span">or use email for registration</span>
<input class="form__input" type="text" placeholder="Name" />
<input class="form__input" type="text" placeholder="Email" />
<input class="form__input" type="password" placeholder="Password" />
<button class="button submit">SIGN UP</button>
</form>
</div>
How do I create Login / Sign In Page using HTML? Free HTML Source code of Login Form
Inside the same index.html and inside the same main div, we will create a login form. Follow the below step.
Step 2 : Now lets add our HTML code for the login or Sign In. There also we will use the same svg icons which we used for the registration page. For login page we will need email , password input elements, an Forgot password link and an Sign In button. Copy or refer below source code.
<div class="container b-container" id="b-container">
<form class="form" id="b-form" method="" action="">
<h2 class="title">Sign in to Website</h2>
<div class="form__icons">
<img class="form__icon" src="svg/fb.svg" alt="" />
<img class="form__icon" src="svg/linkedin.svg" />
<img class="form__icon" src="svg/twitter.svg" />
</div>
<span class="form__span">or use your email account</span>
<input class="form__input" type="text" placeholder="Email" />
<input class="form__input" type="password" placeholder="Password" />
<a class="form__link">Forgot your password?</a>
<button class="button submit">SIGN IN</button>
</form>
</div>
Step 3 : Now we need to add a switch container. You can see in the final demo that, when user wants to Sign In, It says Welcome back and when the users wants to sign up it says Hello, Friend. So lets build that.
One container will be visible and another container will be visible when clicked on the button which we will implement using JavaScript.
<div class="switch" id="switch-cnt">
<div class="switch__circle"></div>
<div class="switch__circle switch__circle--t"></div>
<div class="switch__container" id="switch-c1">
<h2 class="title">Welcome Back !</h2>
<p class="description">To keep connected with us please login with your personal info</p>
<button class="switch__button button switch-btn">SIGN IN</button>
</div>
<div class="switch__container is-hidden" id="switch-c2">
<h2 class="switch__title title">Hello Friend !</h2>
<p class="description">Enter your personal details and start journey with us</p>
<button class="switch__button button switch-btn">SIGN UP</button>
</div>
</div>
Output after adding HTML :
How do I design Login and Registration page with CSS | Free CSS Source Code
Create a styles.css file and link the css file to our html document. Follow the below step to design sign in and sign up form using css.
Step 4 : We will use custom font i.e Montserrat which is imported from the google fonts. Below is the step by step css code. Type it from top to bottom and observe the changes it makes.
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;800&display=swap');
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
user-select: none;
}
body {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Montserrat', sans-serif;
font-size: 12px;
background-color: #ecf0f3;
color: #a0a5a8;
}
.main {
position: relative;
width: 1000px;
min-width: 1000px;
min-height: 600px;
height: 600px;
padding: 25px;
background-color: #ecf0f3;
box-shadow: 10px 10px 10px #d1d9e6, -10px -10px 10px #f9f9f9;
border-radius: 12px;
overflow: hidden;
}
.container {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
width: 600px;
height: 100%;
padding: 25px;
background-color: #ecf0f3;
transition: 1.25s;
}
.form {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%;
height: 100%;
}
.form__icon {
object-fit: contain;
width: 30px;
margin: 0 5px;
opacity: 0.5;
transition: 0.15s;
}
.form__icon:hover {
opacity: 1;
transition: 0.15s;
cursor: pointer;
}
.form__input {
width: 350px;
height: 40px;
margin: 4px 0;
padding-left: 25px;
font-size: 13px;
letter-spacing: 0.15px;
border: none;
outline: none;
font-family: 'Montserrat', sans-serif;
background-color: #ecf0f3;
transition: 0.25s ease;
border-radius: 8px;
box-shadow: inset 2px 2px 4px #d1d9e6, inset -2px -2px 4px #f9f9f9;
}
.form__input:focus {
box-shadow: inset 4px 4px 4px #d1d9e6, inset -4px -4px 4px #f9f9f9;
}
.form__span {
margin-top: 30px;
margin-bottom: 12px;
}
.title {
font-size: 34px;
font-weight: 700;
line-height: 3;
color: #181818;
}
.button {
width: 180px;
height: 50px;
border-radius: 25px;
margin-top: 50px;
font-weight: 700;
font-size: 14px;
letter-spacing: 1.15px;
background-color: #4b70e2;
color: #f9f9f9;
box-shadow: 8px 8px 16px #d1d9e6, -8px -8px 16px #f9f9f9;
border: none;
outline: none;
}
.a-container {
z-index: 100;
left: calc(100% - 600px);
}
.form__link {
color: #181818;
font-size: 15px;
margin-top: 25px;
border-bottom: 1px solid #a0a5a8;
line-height: 2;
}
.b-container {
left: calc(100% - 600px);
z-index: 0;
}
.switch {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 400px;
padding: 50px;
z-index: 200;
transition: 1.25s;
background-color: #ecf0f3;
overflow: hidden;
box-shadow: 4px 4px 10px #d1d9e6, -4px -4px 10px #f9f9f9;
}
.switch__circle {
position: absolute;
width: 500px;
height: 500px;
border-radius: 50%;
background-color: #ecf0f3;
box-shadow: inset 8px 8px 12px #d1d9e6, inset -8px -8px 12px #f9f9f9;
bottom: -60%;
left: -60%;
transition: 1.25s;
}
.switch__circle--t {
top: -30%;
left: 60%;
width: 300px;
height: 300px;
}
.switch__container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: absolute;
width: 400px;
padding: 50px 55px;
transition: 1.25s;
}
.switch__button {
cursor: pointer;
}
.switch__button:hover {
box-shadow: 6px 6px 10px #d1d9e6, -6px -6px 10px #f9f9f9;
transform: scale(0.985);
transition: 0.25s;
}
.switch__button:active,
.switch__button:focus {
box-shadow: 2px 2px 6px #d1d9e6, -2px -2px 6px #f9f9f9;
transform: scale(0.97);
transition: 0.25s;
}
.is-txr {
left: calc(100% - 400px);
transition: 1.25s;
transform-origin: left;
}
.is-txl {
left: 0;
transition: 1.25s;
transform-origin: right;
}
.is-z200 {
z-index: 200;
transition: 1.25s;
}
.is-hidden {
visibility: hidden;
opacity: 0;
position: absolute;
transition: 1.25s;
}
.is-gx {
animation: is-gx 1.25s;
}
@keyframes is-gx {
0%,
10%,
100% {
width: 400px;
}
30%,
50% {
width: 500px;
}
}
.description {
font-size: 14px;
letter-spacing: 0.25px;
text-align: center;
line-height: 1.6;
}
Output after adding CSS :
How to build Sign In and Sign Up page using JavaScript | Free JavaScript Source Code
Create a script.js file and link the jaavascript file to our html document. Follow the below step to add javascript to our project and make it work.
Step 5 : The first thing we have do in any javascript file is to grab the elements that we need from the DOM.
let switchCtn = document.querySelector('#switch-cnt');
let switchC1 = document.querySelector('#switch-c1');
let switchC2 = document.querySelector('#switch-c2');
let switchCircle = document.querySelectorAll('.switch__circle');
let switchBtn = document.querySelectorAll('.switch-btn');
let aContainer = document.querySelector('#a-container');
let bContainer = document.querySelector('#b-container');
let allButtons = document.querySelectorAll('.submit');
Step 6 : By Default when we click on a button which is in the form element. It tries to submit the form and refreshed the page. So, we need to prevent that from happening. We can do it by accessing the event and calling preventDefault() Function.
After this, we will create a function to switch between Sign in and Sign up Form element. and we will set event listeners so that it happens when we click on those buttons.
let getButtons = (e) => e.preventDefault();
let changeForm = (e) => {
switchCtn.classList.add('is-gx');
setTimeout(function () {
switchCtn.classList.remove('is-gx');
}, 1500);
switchCtn.classList.toggle('is-txr');
switchCircle[0].classList.toggle('is-txr');
switchCircle[1].classList.toggle('is-txr');
switchC1.classList.toggle('is-hidden');
switchC2.classList.toggle('is-hidden');
aContainer.classList.toggle('is-txl');
bContainer.classList.toggle('is-txl');
bContainer.classList.toggle('is-z200');
};
let mainF = (e) => {
for (var i = 0; i < allButtons.length; i++) allButtons[i].addEventListener('click', getButtons);
for (var i = 0; i < switchBtn.length; i++) switchBtn[i].addEventListener('click', changeForm);
};
window.addEventListener('load', mainF);
Its Done, You have completed this project. This is what you should be having at the end.
Final Demo of Login and Registration Page :
Thank you for Reading this Article
Credits : Ricardo Oliva Alonso
Sign In and Sign Up Form using HTML CSS JAVASCRPT | Download Source Code :
