Creating a Stylish HTML CSS Login Modal Form

By Faraz - August 15, 2023

Enhance user experience with a stylish login modal form! Follow our web development guide to create an appealing HTML CSS login form.

Join us on Telegram

Creating a Stylish HTML CSS Login Modal Form.jpg

Read Also Creating a Simple Calculator in React (Source Code).jpg

Creating a Simple Calculator in React (Source Code)

In the dynamic realm of modern web development, the importance of creating an engaging and seamless user experience cannot be overstated. One pivotal aspect of this experience is the login process, a gateway to personalized interactions and secured access. A stylish login modal form designed using HTML and CSS not only serves the functional purpose of gathering user credentials but also contributes to the overall aesthetics of your digital platform.

As users navigate through various online interfaces, they often form initial impressions based on visual elements and ease of interaction. A thoughtfully designed login modal can significantly impact this impression, fostering trust and engagement from the very first interaction. By harnessing the capabilities of HTML and CSS, you have the power to transform a mundane login procedure into an elegant experience that resonates with your audience.

Imagine a website that seamlessly blends functionality with beauty—a user is greeted by a sophisticated modal that gracefully appears on the screen, inviting them to log in. The design seamlessly integrates with the website's overall theme, reflecting the brand's identity and commitment to user-centric design. The input fields are well-placed and aesthetically pleasing, making it a joy for users to input their credentials. With a subtle yet captivating animation, the modal emerges, capturing the user's attention without being intrusive.

In the following sections of this tutorial, we will guide you through the intricacies of crafting such an enticing login modal form. From the foundational HTML structure to the meticulous CSS styling, each step will be laid out in a clear and concise manner, ensuring that even those new to web development can follow along. By the end of this guide, you will not only possess the skills to implement a stylish login modal but also insights into the art of harmonizing design and functionality.

So, whether you're an aspiring web developer seeking to enrich your skill set or a seasoned designer aiming to create a more captivating user experience, this guide is tailored to empower you. Let's embark on this journey to master the creation of a Stylish Login Modal Form using HTML and CSS, and unlock the potential to enhance user engagement and elevate your digital presence.

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 modal 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.

Let's break down the code step by step:

1. <!DOCTYPE html>: This declaration defines the document type and version of HTML being used (HTML5 in this case).

2. <html lang="en">: The opening tag of the HTML document. The lang attribute specifies the language of the content, which is set to English ("en" for English).

3. <head>: This section contains meta information and external resources used by the web page.

<title>Login Modal Form</title>: Sets the title of the web page to "Login Modal Form," which appears on the browser tab.
<meta charset="UTF-8" />: Declares the character encoding for the page as UTF-8, ensuring proper handling of special characters.
<meta name="viewport" content="width=device-width" />: Defines the viewport settings to adjust the page's layout to the device's width, making it responsive.
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css'>: Links to the Font Awesome CSS library, allowing the use of icons.
<link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>: Links to the Bootstrap CSS framework, providing styling and layout components.
<link rel="stylesheet" href="styles.css" />: Links to an external CSS file named "styles.css," presumably containing custom styles for the web page.

4. <body>: This section contains the visible content of the web page.

<button class="login-button" href="#" data-target="#login" data-toggle="modal">Login</button>: Creates a button with the class "login-button." When clicked, it triggers a modal with the ID "login" to appear. The data-target and data-toggle attributes are used to achieve this behavior.
<div id="login" class="modal fade" role="dialog">: Defines a modal with the ID "login" and the classes "modal" and "fade." The modal is used for displaying a login form. The role attribute describes the purpose of the element.
<div class="container">: Contains the content of the modal and provides a structured layout.
<div class="form-container sign-in-container">: Contains the actual login form.
<form action="#">: Defines a form element with an action attribute set to "#" (indicating that the form data is not being submitted anywhere).
<h1>Sign in</h1>: Displays a heading indicating that this is a sign-in form.
<div class="social-container">: Contains links to social media login options.
<a href="#" class="social"><i class="fab fa-facebook-f"></i></a>: A link with a Font Awesome icon for Facebook login.
<a href="#" class="social"><i class="fab fa-google-plus-g"></i></a>: A link with a Font Awesome icon for Google login.
<a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>: A link with a Font Awesome icon for LinkedIn login.
<span>or use your account</span>: A text span indicating that users can also use their regular accounts.
<input type="email" placeholder="Email" />: An input field for entering the email address.
<input type="password" placeholder="Password" />: An input field for entering the password (masked for security).
<a href="#">Forgot your password?</a>: A link for users who have forgotten their password.
<button>Sign In</button>: A button to submit the form and attempt to log in.

5. JavaScript libraries:

<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>: This script tag imports the jQuery library, a popular JavaScript library that simplifies DOM manipulation and event handling.
<script src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>: This script tag imports the Bootstrap JavaScript library, which provides interactive components and features for enhancing the user interface.

This is the basic structure of our login modal form using HTML, and now we can move on to styling it using CSS.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Login Modal Form</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css'>
    <link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
<button class="login-button" href="#" data-target="#login" data-toggle="modal">Login</button>
<div id="login" class="modal fade" role="dialog">
  <div class="container">
    <div class="form-container sign-in-container">
      <form action="#">
        <h1>Sign in</h1>
        <div class="social-container">
          <a href="#" class="social"><i class="fab fa-facebook-f"></i></a>
          <a href="#" class="social"><i class="fab fa-google-plus-g"></i></a>
          <a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>
        </div>
        <span>or use your account</span>
        <input type="email" placeholder="Email" />
        <input type="password" placeholder="Password" />
        <a href="#">Forgot your password?</a>
        <button>Sign In</button>
      </form>
    </div>
  </div>
</div>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
  </body>
</html>

Read Also create a subscription form with personalized messaging using html, css and javascript.jpg

Create a Subscription Form with Personalized Messaging

Step 2 (CSS Code):

Once the basic HTML structure of the login modal form is in place, the next step is to add styling to the login modal form using CSS.

Next, we will create our CSS file. In this file, we will use some basic CSS rules to style our form.

Here's a breakdown of the code:

@import url(...): This imports a Google Fonts stylesheet, fetching the "Montserrat" font in two weights (400 and 800) to be used in the webpage.

1. * (Universal Selector):

box-sizing: This property defines how the sizing of an element's content box should be calculated. In this case, it's set to border-box, which includes padding and borders in the element's total width and height.

2. body:

background: Sets the background color of the body to a light grayish color.
display: flex: Turns the body into a flex container.
justify-content: center: Centers the child elements horizontally.
align-items: center: Centers the child elements vertically.
flex-direction: column: Arranges the child elements in a column (top to bottom).
font-family: Sets the font-family for the text on the page to 'Montserrat' and falls back to a generic sans-serif font if 'Montserrat' is not available.
height: 100vh: Sets the height of the body to 100% of the viewport height.
margin: Adjusts the margins, effectively shifting the content up by 20px and down by 50px (negative margin).

3. h1:

font-weight: bold: Makes the text within <h1> elements bold.
margin: 0: Removes any margins around <h1> elements.

4. h2:

text-align: center: Centers the text within <h2> elements.

5. span:

font-size: 12px: Sets the font size of <span> elements to 12px.

6. a (anchor links):

color: #333: Sets the text color of anchor links to a dark gray.
font-size: 14px: Sets the font size of anchor link text to 14px.
text-decoration: none: Removes underlines from anchor links.
margin: 15px 0: Adds vertical margin to anchor links.

7. button:

Styles the appearance of buttons with various properties like border radius, colors, padding, font size, etc.
transition: Applies a smooth scaling transition to the button when it's clicked.
:active and :focus pseudo-classes provide styling for when the button is clicked or focused.

8. form:

Styles the appearance of forms, including background color, padding, text alignment, and flex-related properties.

9. input:

Styles the appearance of input fields, including background color, padding, and margin.

10. .container:

Styles a container element that wraps the form and its related elements.
Defines various visual properties such as background color, border radius, and box shadow.

11. .form-container, .sign-in-container:

These classes are used to transition between different panels in the container. The .sign-in-container slides in from the right when .container.right-panel-active is applied.

12. .social-container:

Styles a container for social media links.
Defines margin properties and styles for the social media links.

13. .social-container a:

Styles the social media links (icons).
Defines border, border-radius, size, and alignment for the icons.

This will give our login modal 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.


@import url('https://fonts.googleapis.com/css?family=Montserrat:400,800');

* {
	box-sizing: border-box;
}

body {
	background: #f6f5f7;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	font-family: 'Montserrat', sans-serif;
	height: 100vh;
	margin: -20px 0 50px;
}

h1 {
	font-weight: bold;
	margin: 0;
}

h2 {
	text-align: center;
}

span {
	font-size: 12px;
}

a {
	color: #333;
	font-size: 14px;
	text-decoration: none;
	margin: 15px 0;
}

button {
	border-radius: 20px;
	border: 1px solid #FF4B2B;
	background-color: #FF4B2B;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
	padding: 12px 45px;
	letter-spacing: 1px;
	text-transform: uppercase;
	transition: transform 80ms ease-in;
}

button:active {
	transform: scale(0.95);
}

button:focus {
	outline: none;
}

form {
	background-color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	padding: 0 50px;
	height: 100%;
	text-align: center;
}

input {
	background-color: #eee;
	border: none;
	padding: 12px 15px;
	margin: 8px 0;
	width: 100%;
}

.container {
	background-color: #fff;
	border-radius: 10px;
  	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 
			0 10px 10px rgba(0,0,0,0.22);
	position: relative;
	overflow: hidden;
	width: 380px;
	max-width: 100%;
	min-height: 480px;
  margin: 50px auto;
}

.form-container {
	position: absolute;
	top: 0;
	height: 100%;
	transition: all 0.6s ease-in-out;
}

.sign-in-container {
	left: 0;
	width: 100%;
}

.container.right-panel-active .sign-in-container {
	transform: translateX(100%);
}

.social-container {
	margin: 20px 0;
}

.social-container a {
	border: 1px solid #DDDDDD;
	border-radius: 50%;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	margin: 0 5px;
	height: 40px;
	width: 40px;
}

Final Output:

Creating a Stylish HTML CSS Login Modal Form.gif

See the Pen Untitled by Faraz (@codewithfaraz) on CodePen.

Read Also

Image Blurry Loading Effect with HTML, CSS, and JavaScript: A Comprehensive Guide

Conclusion:

In the ever-evolving landscape of web development, creating a Stylish Login Modal Form using HTML and CSS is a testament to the fusion of functionality and aesthetics. Through this journey, we've explored the meticulous steps required to craft an inviting gateway for users—a portal that not only facilitates access but also encapsulates the essence of your digital presence.

By embracing the principles of user-centered design, you've harnessed the power of HTML to structure the foundation and CSS to breathe life into the form. The visual harmony between form and function, as exemplified by the elegantly designed modal and its smooth animations, serves as a bridge between technological prowess and artistic expression.

As users interact with your digital platform, they'll be met with a login experience that transcends the mundane. It's a glimpse into the dedication you've invested in understanding their needs, enhancing their journey, and creating an environment where every click is guided by intuition. The login modal form you've meticulously crafted embodies your commitment to excellence.

However, the creation journey doesn't end here. As the digital landscape evolves, so do user expectations and design trends. As you move forward, remember that this guide serves as a foundation—a launching point for your creative exploration. Extend your knowledge, experiment with variations, and adapt to the changing tides of design.

In closing, the journey of crafting a Stylish Login Modal Form is more than a technical endeavor; it's an art that invites users to partake in a seamless and aesthetically pleasing interaction. You've gained the tools to shape digital experiences that resonate with users, leaving a lasting impression that goes beyond code and pixels. As you continue to innovate and inspire, may your designs continue to captivate, engage, and elevate the digital landscape.

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 😊

Tags: stylish login modal form, html css login form, user-friendly modal design, web development tutorial, login form ui, bootstrap

End of the article