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. The login/sign-up page is the first page to show the users for login-protected sites. 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.
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.
Document Type and HTML Declaration
<!DOCTYPE html>: This declaration defines the document type and version of HTML being used. Here, it indicates HTML5.<html lang="en">: This tag encloses the entire HTML document and specifies the language as English.
Head Section
<head>: Contains meta-information about the HTML document.
<title>Home</title>: Sets the title of the webpage, which appears on the browser tab.<meta charset="UTF-8" />: Specifies the character encoding for the document as UTF-8, supporting most characters and symbols.<meta name="viewport" content="width=device-width" />: Ensures the webpage is responsive by setting the viewport to the device's width.<link rel="stylesheet" href="styles.css" />: Links an external CSS file named "styles.css" to style the HTML document.
Body Section
<body>: Contains the content of the HTML document displayed to the user.
<div class="container">: A container div that may be used for overall styling and layout.<div class="center">: A centered div is used for centering the login form on the page.<h1>Login</h1>: A header for the login form.<form action="" method="POST">: A form element with POST method, used for sending form data to the server. The action attribute is empty, indicating that the form will submit to the same URL.<div class="txt_field">: A div for a text input field.<input type="text" name="text" required>: A required text input field for the username.<span></span>: An empty span element, used for styling or validation messages.<label>Username</label>: A label for the username input field.
<div class="txt_field">: A div for a password input field.<input type="password" name="password" required>: A required password input field.<span></span>: An empty span element, used for styling or validation messages.<label>Password</label>: A label for the password input field.
<div class="pass">Forget Password?</div>: A div for a "Forget Password?" link or message.<input name="submit" type="Submit" value="Login">: A submit button for the form.<div class="signup_link">: A div for a signup link.- Not a Member?
<a href="signup.php">Signup</a>: A message with a link to the signup page (signup.php).
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 Styling
- Margin and Padding: Removes default margin and padding to eliminate extra space around the body.
- Font Family: Sets the font to "Roboto" for a clean, modern look.
- Background: Applies a linear gradient background from blue to red, ensuring it covers the entire viewport without repeating.
- Height and Overflow: Sets the body height to fill the viewport and hides any overflow content to prevent scrolling.
Center Class
- Positioning: Positions the element absolutely at the center of the viewport using top, left, and transform.
- Width and Background: Sets a specific width and a white background for contrast.
- Border Radius: Rounds the corners for a smoother look.
Center Header (h1)
- Text Alignment and Padding: Centers the text and adds padding below it.
- Border: Adds a silver bottom border to separate the header from the form.
Form Styling
- Padding and Box Sizing: Adds padding around the form content and ensures padding is included in the element's total width and height.
Text Field Class
- Positioning and Border: Positions elements within it and adds a bottom border.
- Margin: Adds vertical spacing around the text fields.
Text Field Input
- Width and Padding: Makes the input fields full width and adds padding for better spacing.
- Font Size and Background: Adjusts font size and removes the default background.
- Border and Outline: Removes the border and outline for a cleaner look.
Text Field Label
- Positioning and Color: Positions the label inside the input field and sets a gray color.
- Font Size and Pointer Events: Sets font size and prevents the label from being clickable.
- Transform: Vertically centers the label.
Text Field Span
- Pseudo Element: Creates a line below the input field that animates when the input is focused or valid.
- Position and Size: Positions the line and sets its initial size to zero.
- Background and Transition: Adds a blue background and a transition effect for smooth animation.
Text Field Input Focus and Valid States
- Label Position and Color: Moves the label up and changes its color when the input is focused or valid.
- Span Width: Expands the line under the input field.
Password Reset Link
- Margin and Color: Adds margin and sets a gray color.
- Cursor: Changes the cursor to a pointer for interactivity.
- Hover Effect: Underlines the text on hover.
Submit Button
- Size and Border: Sets the width and height and adds a border.
- Border Radius and Font: Rounds the corners and sets font size and weight.
- Cursor: Changes the cursor to a pointer for interactivity.
- Hover Effect: Changes background color and text color on hover with a transition effect.
Signup Link
- Margin and Text Alignment: Adds margin and centers the text.
- Font Size and Color: Sets font size and gray color.
Signup Link Anchor
- Color and Decoration: Change the link color and remove the underline.
- Hover Effect: Underlines the link on hover.
HomeAbout Class
- Width and Height: Sets the element's width to the viewport width and height to 25% of the viewport height.
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 😊
