Neumorphism Login Form UI Design Using HTML and CSS
Foolish DeveloperMay 22, 2021
Neumorphism login form is a modern design login form created using HTML and CSS code. Hello friends, in this article I will show you how to create a login form of Neumorphism design using only HTML and CSS programming code.
Login designs come in different types like transparent, Neumorphism, Glassmorphism, responsive, animated, etc. Earlier I showed you the design of many more types of login forms and showed you how I created those login forms. The login form of this design is much more beautiful and attractive than the general design. Like the general design, it has everything, i.e. there is a place to input the email ID and password to log in.
Everyone has a place to use their first profile image or website logo. There is a nice login button to login here and below it is the Facebook and Google buttons. In other words, the user will be able to login with the help of an email id or Facebook and Google account.
Neumorphism Login Form Using HTML and CSS
Hover effects have been added to each. Normally the buttons are slightly upwards but when the mouse is moved or clicked the buttons will move inwards. In the case of this neomorphic design, the background and the color of the background of the login form are completely the same.
However, it has been given the shape of a login form by creating a color effect with the help of CSS code.
If you want to see the live demo, you can use the demo button at the bottom of the article. You can also download the required source code. However, if you are a beginner, you can definitely watch the tutorial below.
First of all, you create an HTML file. Then you copy the HTML structure below and paste it into that HTML file.
I have used the following codes to create a place to input email ID and password. I used the CSS programming code below to design these and sort them into Neumorphism designs.
<div class="field">
<span class="fa fa-user"></span>
<input type="text" required>
<label>Email Id</label>
</div>
<div class="field">
<span class="fa fa-lock"></span>
<input type="password">
<label>Password</label>
</div>
.content .field{
height: 50px;
width: 100%;
display: flex;
position: relative;
}
.field input{
height: 100%;
width: 100%;
padding-left: 45px;
font-size: 18px;
outline: none;
border: none;
color: #595959;
background: #dde1e7;
border-radius: 25px;
box-shadow: inset 2px 2px 5px #babecc,
inset -5px -5px 10px #ffffff73;
}
.field input:focus ~ label{
box-shadow: inset 2px 2px 5px #babecc,
inset -1px -1px 2px #ffffff73;
}
.field:nth-child(2){
margin-top: 20px;
}
.field span{
position: absolute;
width: 50px;
line-height: 50px;
color: #595959;
}
.field label{
position: absolute;
top: 50%;
left: 45px;
pointer-events: none;
color: #666666;
transform: translateY(-50%);
}
.field input:focus ~ label{
opacity: 0;
}
Result:
Step 5: Create a login button
I have used a login button in this neomorphic login form. I have used the following programming codes to create and design that login button.
<button>Log in</button>
button{
margin: 25px 0 0 0;
width: 100%;
height: 50px;
color: #000;
font-size: 18px;
font-weight: 600;
background: #dde1e7;
border: none;
outline: none;
cursor: pointer;
border-radius: 25px;
box-shadow: 2px 2px 5px #babecc,
-5px -5px 10px #ffffff73;
}
button:focus{
color: #3498db;
box-shadow: inset 2px 2px 5px #babecc,
inset -5px -5px 10px #ffffff73;
}
Result:
Step 6: Create social buttons
Below all are the buttons of Facebook and Google. With the help of which the user will be able to login into his account. I made it using the following programming codes and used the CSS programming codes below to design it.
Hope you like the Neumorphism Login Form design and you have learned how to make it from this article. If there is any problem, you can definitely comment. I have already created many more web elements of Neumorphism designs. You can see those designs.
