Learn how to create a Pure CSS Simple Login Page with this step-by-step tutorial. No JavaScript or external libraries required. Perfect for beginners in HTML and CSS.
Table of Contents
A login form is one of the most important pages of a website that allows authorized users to access an entire site or a part of a website. For login protected sites, the login/sign up page is the very first page to show the users. Whether it’s a signup or login page, it should be attractive, user-friendly, and easy to use.
The login form will only ask for a username or email and password.
Why Create a Pure CSS Simple Login Page?
Creating a Pure CSS Simple Login Page offers several benefits, including:
- Faster Load Times: By using pure CSS, you can reduce the amount of code needed for your login page, which can result in faster load times. This is particularly important for mobile users who may have slower internet connections.
- Easier Maintenance: Since you're not relying on external libraries or JavaScript, your login page will be easier to maintain. You won't have to worry about updating dependencies or fixing compatibility issues.
- Easier Maintenance: Since you're not relying on external libraries or JavaScript, your login page will be easier to maintain. You won't have to worry about updating dependencies or fixing compatibility issues.
Overall, creating a Pure CSS Simple Login Page can simplify your web development process, reduce load times, improve accessibility, and make your website or application easier to maintain in the long run.
Let's start making these a pure css login form using HTML, and CSS step by step.
Join My Telegram Channel to Download the Project: Click Here
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML, and CSS. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our login form.
After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
This is the basic structure of our login form using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the login form is in place, the next step is to add styling to the login form using CSS. CSS allows us to control the visual appearance of the login form, including things like layout, color, and typography.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our login form. We will also add some padding and margin properties to ensure that everything looks correct.
This will give our login form an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
body{
margin: 0;
padding: 0;
font-family: Roboto;
background-repeat: no-repeat;
background-size: cover;
background: linear-gradient(120deg, #007bff, #d0314c);
height: 100vh;
overflow: hidden;
}
.center{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 29vw;
background: white;
border-radius: 10px;
}
.center h1{
text-align: center;
padding: 0 0 20px 0;
border-bottom: 1px solid silver;
}
.center form{
padding: 0 40px;
box-sizing: border-box;
}
form .txt_field{
position: relative;
border-bottom: 2px solid #adadad;
margin: 30px 0;
}
.txt_field input{
width: 100%;
padding: 0 5px;
height: 40px;
font-size: 16px;
border: none;
background: none;
outline: none;
}
.txt_field label{
position: absolute;
top: 50%;
left: 5px;
color: #adadad;
transform: translateY(-50%);
font-size: 16px;
pointer-events: none;
}
.txt_field span::before{
content: '';
position: absolute;
top: 40px;
left: 0;
width: 0px;
height: 2px;
background: #2691d9;
transition: .5s;
}
.txt_field input:focus ~ label,
.txt_field input:valid ~ label{
top: -5px;
color: #2691d9;
}
.txt_field input:focus ~ span::before,
.txt_field input:Valid ~ span::before{
width: 100%;
}
.pass{
margin: -5px 0 20px 5px;
color: #a6a6a6;
cursor: pointer;
}
.pass:hover{
text-decoration: underline;
}
input[type="Submit"]{
width: 100%;
height: 50px;
border: 1px solid;
border-radius: 25px;
font-size: 18px;
font-weight: 700;
cursor: pointer;
}
input[type="Submit"]:hover{
background: #2691d9;
color: #e9f4fb;
transition: .5s;
}
.signup_link{
margin: 30px 0;
text-align: center;
font-size: 16px;
color: #666666;
}
.signup_link a{
color: #2691d9;
text-decoration: none;
}
.signup_link a:hover{
text-decoration: underline;
}
.HomeAbout{
width: 100vw;
height: 25vh;
} Final Output:
Conclusion:
In this tutorial, we've learned how to create a Pure CSS Simple Login Page. We discussed the benefits of creating a Pure CSS Login Page, including faster load times, easier maintenance, and better accessibility. We also provided a step-by-step guide to creating a login page with pure CSS, including setting up the HTML markup, styling the login form, and adding form validation with CSS.
Remember, this tutorial is perfect for beginners in web development who have a basic understanding of HTML and CSS. We encourage you to experiment with creating your own login pages using the techniques you've learned. If you want to learn more about HTML, CSS, and web development, there are many additional resources available online.
Thank you for reading this tutorial and we hope you found it helpful!
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
