Welcome to this tutorial on creating a CSS Login Form Page using HTML and CSS. In this CSS Login Form tutorial, we will guide you through the process of designing an aesthetically pleasing and functional login form. By the end of this tutorial, you will have a better understanding of HTML and CSS and be able to create your own login form pages. Let’s get started!
Project Folder Structure:
Now before we move on to actual coding we created a project folder structure. We name the project folder “Neumorphic buttons”. Within this folder, we have 2 files. These files are:
- index.html
- style.css
HTML Code
Let’s commence by incorporating the HTML code. Kindly duplicate the ensuing code and integrate it into your HTML file.
<!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" />
<link rel="stylesheet" href="style.css" />
<script src="https://kit.fontawesome.com/1cf483120b.js" crossorigin="anonymous"></script>
<title>Login Form</title>
</head>
<body>
<div class="container">
<div class="screen">
<div class="screen__content">
<form class="login">
<h1 style="position: absolute;padding-top: 0.3rem;padding-right: 0.6rem;top: 0;right: 0;font-size: 20px;color: rgb(255, 255, 255);">Nijaa.com</h1>
<div class="login__field">
<i class="login__icon fas fa-user"></i>
<input type="text" class="login__input" placeholder="User name / Email">
</div>
<div class="login__field">
<i class="login__icon fas fa-lock"></i>
<input type="password" class="login__input" placeholder="Password">
</div>
<button class="button login__submit">
<span class="button__text">Log In Now</span>
<i class="button__icon fas fa-chevron-right"></i>
</button>
</form>
<div class="social-login">
<h3>log in via</h3>
<div class="social-icons">
<a href="#" class="social-login__icon fab fa-instagram"></a>
<a href="#" class="social-login__icon fab fa-facebook"></a>
<a href="#" class="social-login__icon fab fa-twitter"></a>
</div>
</div>
</div>
<div class="screen__background">
<span class="screen__background__shape screen__background__shape4"></span>
<span class="screen__background__shape screen__background__shape3"></span>
<span class="screen__background__shape screen__background__shape2"></span>
<span class="screen__background__shape screen__background__shape1"></span>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Code language: HTML, XML (xml)
This HTML code creates a login form for Nijaa.com. It includes input fields for username/email and password, along with a login button. Additionally, there are social login options for Instagram, Facebook, and Twitter. The page also features background shapes for aesthetic purposes. External stylesheets and JavaScript files are linked to provide styling and interactivity to the form.
HTML Code Explanation
- HTML Structure: The code sets up a basic HTML structure with the
<!DOCTYPE html>
declaration,<html>
,<head>
, and<body>
tags. It includes a<meta>
tag for character encoding, viewport settings, and a title for the page. - CSS Link: The line
<link rel="stylesheet" href="style.css">
links an external CSS file called “style.css” to the HTML document. This file contains the CSS rules that will style the elements on the page. - Font Awesome Integration: The script tag
<script src="https://kit.fontawesome.com/1cf483120b.js" crossorigin="anonymous"></script>
integrates the Font Awesome library. This library provides various icons, such as the ones used for the login form and social media logos. - Container Div: The
<div class="container">
wraps the entire content of the page, providing a basic structure for the layout. - Screen Div: The
<div class="screen">
creates a container for the main login form and background elements. - Screen Content: The
<div class="screen__content">
contains the actual login form and other elements. - Login Form: The
<form class="login">
tag represents the login form itself. It contains input fields for username/email and password, a submit button, and social media login options. - Form Styling: The CSS classes like
.login__field
,.login__icon
,.login__input
,.login__submit
, etc., define the styles for the form elements, such as input fields, icons, and buttons. They control the appearance, positioning, and user interaction. - Social Media Icons: The social media icons are added as links with the class
.social-login__icon
. They are styled using CSS classes like.fab
,.fa-instagram
,.fa-facebook
, and.fa-twitter
. These classes define the appearance and behavior of the icons. - Background Shapes: The
<span>
tags within the `<div class: “screen__background”>” represent different shapes used for the background. They have classes like.screen__background__shape1
,.screen__background__shape2
, etc., which define their appearance and positioning using CSS. - JavaScript: Although the provided code snippet doesn’t include a JavaScript file, the
<script src="script.js"></script>
tag indicates that there might be a JavaScript file named “script.js” that handles interactivity or additional functionality for the login form and other elements on the page.
CSS Code
The CSS code styles the game elements, providing visual effects and animations to enhance the user experience. copy the ensuing code and insert it into your stylesheet.
@import url("https://fonts.googleapis.com/css?family=Raleway:400,700");
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: Raleway, sans-serif;
}
body {
padding: 1rem;
background: linear-gradient(90deg, #f4e4c5, #cc976b);
}
.container {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.screen {
background: linear-gradient(90deg, #9e7c49, #ca4b10);
position: relative;
height: 600px;
width: 360px;
box-shadow: 0px 0px 24px #5c5696;
}
.screen__content {
z-index: 1;
position: relative;
height: 100%;
}
.screen__background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
-webkit-clip-path: inset(0 0 0 0);
clip-path: inset(0 0 0 0);
}
.screen__background__shape {
transform: rotate(45deg);
position: absolute;
}
.screen__background__shape1 {
height: 520px;
width: 520px;
background: #fff;
top: -50px;
right: 120px;
border-radius: 0 72px 0 0;
}
.screen__background__shape2 {
height: 220px;
width: 220px;
background: #ce2828;
top: -172px;
right: 0;
border-radius: 32px;
}
.screen__background__shape3 {
height: 540px;
width: 190px;
background: linear-gradient(270deg, #a47154, #b91717);
top: -24px;
right: 0;
border-radius: 32px;
}
.screen__background__shape4 {
height: 400px;
width: 200px;
background: #d32222;
top: 420px;
right: 50px;
border-radius: 60px;
}
.login {
width: 320px;
padding: 30px;
padding-top: 156px;
}
.login__field {
padding: 20px 0px;
position: relative;
}
.login__icon {
position: absolute;
top: 30px;
color: #ce2828;
}
.login__input {
border: none;
border-bottom: 2px solid #d1d1d4;
background: none;
padding: 10px;
padding-left: 24px;
font-weight: 700;
width: 75%;
transition: 0.2s;
}
.login__input:active,
.login__input:focus,
.login__input:hover {
outline: none;
border-bottom-color: #ce2828;
}
.login__submit {
background: #fff;
font-size: 14px;
margin-top: 30px;
padding: 16px 20px;
border-radius: 26px;
border: 1px solid #d4d3e8;
text-transform: uppercase;
font-weight: 700;
display: flex;
align-items: center;
width: 100%;
color: #ce2828;
box-shadow: 0px 2px 2px #ce2828;
cursor: pointer;
transition: 0.2s;
}
.login__submit:active,
.login__submit:focus,
.login__submit:hover {
border-color: #ce2828;
outline: none;
}
.button__icon {
font-size: 24px;
margin-left: auto;
color: #ce2828;
}
.social-login {
position: absolute;
height: 140px;
width: 160px;
text-align: center;
bottom: 0px;
right: 0px;
color: #fff;
}
.social-icons {
display: flex;
align-items: center;
justify-content: center;
}
.social-login__icon {
padding: 20px 10px;
color: #fff;
text-decoration: none;
text-shadow: 0px 0px 8px #7875b5;
}
.social-login__icon:hover {
transform: scale(1.5);
}
Code language: CSS (css)
This CSS code provides styling for a login form interface. It includes styles for various elements such as the body, container, screen, background shapes, login form fields, submit button, and social login icons. The styles define the layout, colors, font properties, and transitions to create a visually appealing and functional login form. Additionally, it imports the Rale way font from Google Fonts for use throughout the interface.
Code Explanation
@import url("https://fonts.googleapis.com/css?family=Raleway:400,700");
This line imports a custom font from Google Fonts, which will be used throughout the form.* { box-sizing: border-box; margin: 0; padding: 0; font-family: Raleway, sans-serif; }
This block of code sets the global styles for the entire page. It ensures that elements use the border-box box model for consistent layout, removes any default margins and paddings, and sets the font family to Raleway.body { padding: 1rem; background: linear-gradient(90deg, #f4e4c5, #cc976b); }
The body element is styled with a 1rem padding and a background gradient to create a visually appealing background..container { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
This class centers the login form on the page and ensures it takes up the full height of the viewport..screen { background: linear-gradient(90deg, #9e7c49, #ca4b10); position: relative; height: 600px; width: 360px; box-shadow: 0px 0px 24px #5c5696; }
The login form’s container has a gradient background, a relative position, a specific height and width, and a box shadow for depth..screen__content, .screen__background, .screen__background__shape1, .screen__background__shape2, .screen__background__shape3, .screen__background__shape4 { // Styles for various shapes and elements within the form's background }
These classes define the styles for different shapes and elements within the form’s background, giving it a unique look..login { width: 320px; padding: 30px; padding-top: 156px; }
The login form itself has a fixed width and padding to create space around the input fields..login__field { padding: 20px 0px; position: relative; }
These classes define the styles for the input fields within the login form. They have padding and a relative position to allow for the placement of icons..login__icon { position: absolute; top: 30px; color: #ce2828; }
This class styles the icons that appear alongside the input fields. They are positioned absolutely and have a specific top position and color..login__input { border: none; border-bottom: 2px solid #d1d1d4; background: none; padding: 10px; padding-left: 24px; font-weight: 700; width: 75%; transition: 0.2s; }
The login input fields have no border, a bottom border for focus, and a left padding for the icon. They are also transitioned for a smooth animation when interacted with..login__input:active, .login__input:focus, .login__input:hover { outline: none; border-bottom-color: #ce2828; }
When the input fields are active, focused, or hovered over, they have no outline, and the bottom border color changes to match the theme..login__submit { background: #fff; font-size: 14px; margin-top: 30px; padding: 16px 20px; border-radius: 26px; border: 1px solid #d4d3e8; text-transform: uppercase; font-weight: 700; display: flex; align-items: center; width: 100%; color: #ce2828; box-shadow: 0px 2px 2px #ce2828; cursor: pointer; transition: 0.2s; }
The submit button has a white background, specific font styles, padding, and a border. It also has a gradient box shadow, a cursor for interaction, and a transition for a smooth animation..login__submit:active, .login__submit:focus, .login__submit:hover { border-color: #ce2828; outline: none; }
When the submit button is active, focused, or hovered over, its border color changes, and it has no outline..button__icon { font-size: 24px; margin-left: auto; color: #ce2828; }
This class styles the icon within the submit button, positioning it to the right and giving it the desired color..social-login { position: absolute; height: 140px; width: 160px; text-align: center; bottom: 0px; right: 0px; color: #fff; }
The social login icons are positioned absolutely at the bottom right corner of the form, with specific height, width, and text alignment..social-icons { display: flex; align-items: center; justify-content: center; }
This class styles the social icons within the social login container, arranging them in a flexbox with aligned items and centered content..social-login__icon { padding: 20px 10px; color: #fff; text-decoration: none; text-shadow: 0px 0px 8px #7875b5; }
The individual social icons have padding, color, and text decoration styles, along with a text shadow for a visually appealing appearance..social-login__icon:hover { transform: scale(1.5); }
When the social icons are hovered over, they scale up by 1.5 times, creating an interactive effect.