How To Create a Popup Login Form using only CSS & HTML
In this article, I am going to show you how to create a pop-up login form using HTML and CSS. You must have seen different types of websites or applications…
Glassmorphism Login Form in HTML & CSS (2021)
Glassmorphism Login Form is currently gaining much popularity for this beauty. CSS Glassmorphism is a UI design that is basically like a transparent design. However, in this case, the background…
Neumorphism Login Form using HTML & CSS
Neumorphism Login Form is much more interesting than other login designs. CSS Neumorphism Login Form You can easily create with HTML and CSS. In this article, I am going to show you how to create a Neumorphism login form using only HTML and CSS code. Earlier I made login form in many more designs.
We all know that the login form is a very important element of a website. This type of login form is used to access accounts on various websites. There are different types of login forms that I have already created. Neumorphism is a very important UI trend. This design is much simpler and much more interesting to look at than the general design.
Neumorphism All these elements are made by a single color in the case of login design. In this case, the element and the background of the web page are completely the same. The size of the element is determined here using only the shadow of the CSS code.
Video Tutorial of Neumorphism Login Form
You can watch the video below to know the complete tutorial on how I made this CSS Neumorphism login page.
Hopefully, you have learned how to make it from the video tutorial above. Everything here is like a normal login form.
In the case of Neumorphism design, the background color of the webpage and the background color of the element is the same. In that case, the shape of the element is created using the shadow (box-shadow) of CSS.
First of all, I used a profile image. This image is slightly above the login form, meaning that half of the image is inside the Neomorphism Login Form Design and the other half is outside the login form. Which looks much more interesting and beautiful to look at. Below that, I used a title. I used email ID and password input space to log in. I have used one icon for each input. Then there is a login button.
Normally the button rises slightly upwards. When you click on it, the button will move slightly inwards. I have used some text below everyone. All in all, it is a very simple CSS Neumorphism login form design.
Below I have given a live demo that will help you know how it works. Below you will find the required source code which you can copy and use for any of your own purposes. Also at the bottom of the article, I have given the download button to download the source code. But if you are a beginner then you must follow the tutorial below.
Simple PopUp Login Form Using HTML and CSS
Learn how to create a pop-up login form using HTML, CSS, and JavaScript. The popup login form is a great modern UI design login form. In the meantime, I have…
Glassmorphism login form Design using HTML and CSS
In this article, You will learn how to create a Glassmorphism login form using HTML and CSS. I have shown many more types of login forms and Glassmorphism login forms…
Easy Simple Login and Registration Form Using HTML CSS
In this article, I am going to show you how to create a simple login and registration form of Neumorphism design using HTML, CSS, and Jquery code. Earlier I shared with you the design of many more types of login forms. Hope you like this design login form like other designs.
Basically different forms are created for login and registration on different websites. In the meantime, I have shown you how to create a separate login and registration form. In this article, I have created a place for simple log in and registration in a form.
This form allows the user to log in and creates a new account. I used HTML and CSS programming code to design to enhance its structure. A small amount of JQuery programming code is used here to execute the login and registration button above.
I have added social media icon in the login form. This login form is arranged in the form of a Neumorphism design.
Simple Login and Registration Form HTML CSS
If you want to know how it works, you can watch the demo below. You can copy the source code needed to create it from the demo site below and use it for your work.
But if you are a beginner and want to know how to create a login and registration form at the same time, you must follow the tutorial below. In the tutorial below I have shown step by step how I made this design. After each step, I have shown the result so it will be useful for you to understand.
See the Pen
login & sign by Foolish Developer (@fghty)
on CodePen.
First, you create an HTML and CSS file. Then combine the HTML file and the CSS file with each other. You add the JQuery plugin here.
How to create login and registration form
Basically, we know that the JQuery programming code works with the JQuery plugin. So you must add the following JQuery plugin in the head section of your HTML file.
<script src=”https://code.jquery.com/jquery-3.6.0.js”></script>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>
Step 1: Create the basic structure of this login form
The HTML programming code below is basically the basic structure for creating this registration form. You can copy this structure and add it to your HTML file.
<div class="wrapper">
<div class="container">
<!--tabs(menu)-->
</div>
</div>Basically, the following codes have helped to design the background of this login form and give a certain size to this login form. As I said before, Neumorphism design has been used in this form. CSS programming code has been used to enhance this design.
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
list-style: none;
text-decoration: none;
font-family: 'Josefin Sans', sans-serif;
}
body{
background: #dde1e7;
}
.wrapper{
max-width: 400px;
width: 100%;
height: 420px;
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%,-50%);
background: #dde1e7;
box-shadow: -3px -3px 7px #ffffff73, 2px 2px 5px rgba(94, 104, 121, 0.288);
}
.container{
padding: 35px 40px;
}
Step 2: Create a button to open the login and registration form (more…)
How to Create a Simple Login Form Using HTML and CSS
In this article, I am going to show you how to create a simple login form using HTML, CSS, and Bootstrap programming code. Earlier I designed different types of login forms like Neumorphism, Glassmorphism. This login form is very simple and beautifully designed.
Basically in this case I have created this login form using HTML, CSS programming code. I designed it using CSS programming code and made it responsive with bootstrap programming. Everything here is like a normal login form. First of all, there is a place to give a profile image, I have used a title below it. Then there is a place to input the email ID and password to log in. In this case, of course, I used the icon in the email ID and password box. There is a forget password and login button. If you do not have an account, there is an option to create an account. All in all, it is a complete login design that you can easily create with HTML CSS and bootstrap code.
#1 Amazing Professional Popup Login Form using HTML
Hello in this article you are going to learn about How to create a popup login form using HTML, CSS, and Bootstrap . I have designed another pop-up login form.…
Glassmorphism login form UI Design using HTML & CSS
From this article, you will learn how to create a Glassmorphism login form with the help of HTML and CSS programming code. Glassmorphism is a modern design that is currently…
How To Create Pop Up Login Form Using HTML and CSS
The pop-up login form is a modern type of login form design that is very popular nowadays. In the case of this type of design, the login form is completely…