Create Pure CSS Login and Sign-Up Form with HTML & CSS

Faraz

By Faraz - Last Updated:

Learn how to create a single-page login and sign-up form using pure CSS and HTML. This guide provides a simple, responsive, and stylish design.

Join us on Telegram
pure css single page login and sign-up form using html and css.png
Read AlsoCreate a Stunning Resume with Tailwind CSS.jpgCreate a Stunning Resume with Tailwind CSS (Source Code)

Table of Contents

  1. Project Introduction
  2. HTML Code
  3. CSS Code
  4. Conclusion
  5. Preview

Login and sign-up forms are one of the most important elements of a website; hence, the design of these online forms is one of the most important features when it comes to website design. A successfully created sign-up form also encourages and allows the visitor to become a member, subscriber, or customer of a particular company. A sober, creative, and visually appealing registration form will certainly encourage visitor success conversion rates if all other features are properly coordinated.

Designing an efficient and clean login/sign-up form requires a lot of creativity from the designer as having an attractive and outstanding form is vital for a website to be successful and effective.

In this tutorial, we will show you how to create a pure CSS single page login and sign-up form using HTML and CSS. This tutorial assumes that you have a basic understanding of HTML and CSS. The login and sign-up forms will be created on a single page, making the process simpler and more efficient.

Let's start making these amazing single-page Login and Sign-up forms using HTML and CSS step by step.

Created by: Ivan Grozdic

Source Code

Step 1 (HTML Code):

We first need to create our HTML File for login and sign-up form. We'll start with a well-organized markup. After creating the files paste the below codes into your file. Remember that you must save a file with the .html extension.

Below is a detailed explanation of the code:

1. HTML Document Structure

  • <!DOCTYPE html>: Declares the document type as HTML5.
  • <html lang="en">: Sets the language of the document to English.
  • <head>: Contains metadata and links to stylesheets.
  • <body>: Contains the main content of the page.

2. Head Section

  • <title>: Sets the title of the page as "Home."
  • <meta charset="UTF-8">: Ensures proper encoding for special characters.
  • <meta name="viewport" content="width=device-width">: Makes the page responsive for mobile devices.
  • Stylesheets:
    • Bootstrap CSS: Provides responsive grid and utility classes.
    • Custom Styles (styles.css): Adds additional styling.
    • Unicons (unicons.css): Adds icons for input fields.

3. Body Section

  • <div class="section">: The outermost container for the form section.
  • <div class="container">: A Bootstrap container for centering and layout.
  • <div class="row full-height justify-content-center">: Creates a full-height row and centers content horizontally.
  • <div class="col-12 text-center align-self-center py-5">: Centers the content vertically and adds padding.

4. Interactive Login/Signup Toggle

  • <h6>: Contains two spans for "Log In" and "Sign Up" to indicate the current form.
  • <input type="checkbox" id="reg-log">: A hidden checkbox toggles between login and signup forms.
  • <label for="reg-log">: Used to style and control the checkbox.

5. 3D Card Structure

  • <div class="card-3d-wrap mx-auto">: Centers the card container.
  • <div class="card-3d-wrapper">: Holds the front and back faces of the card.
    • Front Face (card-front):
      • Displays the Login Form.
      • Includes input fields for:
        • Email (with an email icon).
        • Password (with a lock icon).
      • A submit button and a "Forgot your password?" link.
    • Back Face (card-back):
      • Displays the Signup Form.
      • Includes input fields for:
        • Full Name (with a user icon).
        • Email (with an email icon).
        • Password (with a lock icon).
      • A submit button.

6. Form Fields

  • Each input field uses:
    • <input>: For data entry.
    • class="form-style": Custom styling for inputs.
    • placeholder: Placeholder text for hints.
    • Icons (<i class="input-icon uil ...">): Visual cues for each input field.

7. Styling and Animation

  • styles.css: Likely contains styles for:
    • 3D card flipping animations.
    • Hover effects and transitions.
    • Custom colors, fonts, and layout adjustments.
  • Bootstrap and Unicons: Provide additional styling and icons.

8. Features

  • Responsive Design: Ensures usability across devices.
  • Toggle Animation: Smooth transition between login and signup forms.
  • Modern UI: Clean, user-friendly interface with icons and placeholders.
Read Alsocreate-modern-expense-tracker-using-html-css-and-javascript.webpCreate Modern Expense Tracker Using HTML, CSS, and JavaScript

Step 2 (CSS Code):

Next, we need to style our login and sign-up form by adding our CSS. This will give our login and sign-up form an upgraded presentation. Create a CSS file with the name styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.

Below is a breakdown of the code:

1. Font and Body Styling

  • @import: Imports the "Poppins" font from Google Fonts with specified weights (400-900).
  • body:
    • Sets the font to "Poppins" and fallback to sans-serif.
    • Applies a light gray text color (#c4c3ca) and dark background color (#1f2029).
    • Ensures no horizontal scrolling (overflow-x: hidden).

2. Link Styling

  • a:
    • Adds a pointer cursor and smooth transition for hover effects.
  • a:hover: Removes text decoration on hover.
  • .link: Styles links with the default text color and changes to yellow (#ffeba7) on hover.

3. Typography

  • p: Sets font weight, size, and line spacing for paragraphs.
  • h4 and h6:
    • h4: Bold headers.
    • h6 span: Adds padding and uppercase transformation for text inside span.

4. Section and Height

  • .section: Makes sections occupy the full width.
  • .full-height: Ensures elements fill at least the viewport height.

5. Checkbox Styling

  • [type="checkbox"]: Hides the checkbox visually by moving it off-screen.
  • .checkbox:
    • Styles a custom toggle switch with a rounded background.
    • Changes appearance based on the checked state.

6. 3D Card Effect

  • .card-3d-wrap: Creates a 3D container with perspective.
  • .card-3d-wrapper: Rotates the card smoothly on state change.
  • .card-front and .card-back:
    • Front and back faces of the card.
    • Hidden backface visibility enables smooth flipping.
    • Back face rotates 180° for the flip effect.
  • .checkbox:checked ~ .card-3d-wrap .card-3d-wrapper: Triggers the card flip when the checkbox is checked.

7. Form Styling

  • .form-group: Basic block-level container for form elements.
  • .form-style:
    • Adds padding, rounded corners, and shadow effects.
    • Smooth transitions for focus states.
  • .input-icon: Positions an icon inside form inputs.
  • Placeholder Styling: Customizes the appearance of placeholder text and hides it on focus.

8. Button Styling

  • .btn:
    • Creates a styled button with uppercase text, padding, and shadows.
    • Changes background and text color on hover or focus.

9. General Design Principles

  • Colors: A consistent color scheme of dark blue, light gray, and yellow.
  • Transitions: Smooth transitions (200ms to 600ms) for hover, focus, and state changes.
  • 3D Effects: Uses perspective and transform-style: preserve-3d for interactive card flipping.
  • Accessibility: Hides elements off-screen instead of removing them, ensuring screen readers can still interpret them.
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800,900');

body{
	font-family: 'Poppins', sans-serif;
	font-weight: 300;
	font-size: 15px;
	line-height: 1.7;
	color: #c4c3ca;
	background-color: #1f2029;
	overflow-x: hidden;
}

a {
	cursor: pointer;
  transition: all 200ms linear;
}
a:hover {
	text-decoration: none;
}
.link {
  color: #c4c3ca;
}
.link:hover {
  color: #ffeba7;
}
p {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.7;
}
h4 {
  font-weight: 600;
}
h6 span{
  padding: 0 20px;
  text-transform: uppercase;
  font-weight: 700;
}
.section{
  position: relative;
  width: 100%;
  display: block;
}
.full-height{
  min-height: 100vh;
}
[type="checkbox"]:checked,
[type="checkbox"]:not(:checked){
  position: absolute;
  left: -9999px;
}
.checkbox:checked + label,
.checkbox:not(:checked) + label{
  position: relative;
  display: block;
  text-align: center;
  width: 60px;
  height: 16px;
  border-radius: 8px;
  padding: 0;
  margin: 10px auto;
  cursor: pointer;
  background-color: #ffeba7;
}
.checkbox:checked + label:before,
.checkbox:not(:checked) + label:before{
  position: absolute;
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #ffeba7;
  background-color: #102770;
  font-family: 'unicons';
  content: '\eb4f';
  z-index: 20;
  top: -10px;
  left: -10px;
  line-height: 36px;
  text-align: center;
  font-size: 24px;
  transition: all 0.5s ease;
}
.checkbox:checked + label:before {
  transform: translateX(44px) rotate(-270deg);
}


.card-3d-wrap {
  position: relative;
  width: 440px;
  max-width: 100%;
  height: 400px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  perspective: 800px;
  margin-top: 60px;
}
.card-3d-wrapper {
  width: 100%;
  height: 100%;
  position:absolute;    
  top: 0;
  left: 0;  
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transition: all 600ms ease-out; 
}
.card-front, .card-back {
  width: 100%;
  height: 100%;
  background-color: #2a2b38;
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1462889/pat.svg');
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: 300%;
  position: absolute;
  border-radius: 6px;
  left: 0;
  top: 0;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}
.card-back {
  transform: rotateY(180deg);
}
.checkbox:checked ~ .card-3d-wrap .card-3d-wrapper {
  transform: rotateY(180deg);
}
.center-wrap{
  position: absolute;
  width: 100%;
  padding: 0 35px;
  top: 50%;
  left: 0;
  transform: translate3d(0, -50%, 35px) perspective(100px);
  z-index: 20;
  display: block;
}


.form-group{ 
  position: relative;
  display: block;
    margin: 0;
    padding: 0;
}
.form-style {
  padding: 13px 20px;
  padding-left: 55px;
  height: 48px;
  width: 100%;
  font-weight: 500;
  border-radius: 4px;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: 0.5px;
  outline: none;
  color: #c4c3ca;
  background-color: #1f2029;
  border: none;
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
  box-shadow: 0 4px 8px 0 rgba(21,21,21,.2);
}
.form-style:focus,
.form-style:active {
  border: none;
  outline: none;
  box-shadow: 0 4px 8px 0 rgba(21,21,21,.2);
}
.input-icon {
  position: absolute;
  top: 0;
  left: 18px;
  height: 48px;
  font-size: 24px;
  line-height: 48px;
  text-align: left;
  color: #ffeba7;
  -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}

.form-group input:-ms-input-placeholder  {
  color: #c4c3ca;
  opacity: 0.7;
  -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
.form-group input::-moz-placeholder  {
  color: #c4c3ca;
  opacity: 0.7;
  -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
.form-group input:-moz-placeholder  {
  color: #c4c3ca;
  opacity: 0.7;
  -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
.form-group input::-webkit-input-placeholder  {
  color: #c4c3ca;
  opacity: 0.7;
  -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
.form-group input:focus:-ms-input-placeholder  {
  opacity: 0;
  -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
.form-group input:focus::-moz-placeholder  {
  opacity: 0;
  -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
.form-group input:focus:-moz-placeholder  {
  opacity: 0;
  -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
.form-group input:focus::-webkit-input-placeholder  {
  opacity: 0;
  -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}

.btn{  
  border-radius: 4px;
  height: 44px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  -webkit-transition : all 200ms linear;
  transition: all 200ms linear;
  padding: 0 30px;
  letter-spacing: 1px;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center;
  text-align: center;
  border: none;
  background-color: #ffeba7;
  color: #102770;
  box-shadow: 0 8px 24px 0 rgba(255,235,167,.2);
}
.btn:active,
.btn:focus{  
  background-color: #102770;
  color: #ffeba7;
  box-shadow: 0 8px 24px 0 rgba(16,39,112,.2);
}
.btn:hover{  
  background-color: #102770;
  color: #ffeba7;
  box-shadow: 0 8px 24px 0 rgba(16,39,112,.2);
}

Final Output:

pure css single page login and sign-up form using html and css.gif
Read AlsoHow to Create a TikTok Clone Using HTML, CSS, and JavaScript.webpHow to Create a TikTok Clone Using HTML, CSS, and JavaScript (Source Code)

Conclusion:

In this tutorial, we have shown you how to create a single-page login and sign-up form using HTML and CSS. By following our step-by-step guide, you can create a simple, clean, and effective login and sign-up form for your website. By using pure CSS, you can maintain a consistent design across your page and reduce the load time of your website. We hope you found this tutorial helpful and informative, and we encourage you to experiment with the code and explore more features of HTML and CSS to create even more impressive designs.

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: login/signup page, css, html, login form, sign-up form, front-end development, pure css login form, css login form tutorial, css sign-up form tutorial, html login form tutorial, html sign-up form tutorial, single page login form
End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Post

Please allow ads on our site🥺