Animated Sign up and Login Page using HTML and CSS

Hello, learner. Today, in this blog post, we will create an animated sign up and login page using HTML and CSS. In the past post, we have created many projects, one of them is Glowing Neon Social Media Button. It is time to animate the sign up and login page without wasting time.

As you know, a login form is used to access a restricted page or form. It contains a field for the username and password the user uses to log in. The login form is a record form like a search form. A login page is one of the most important pages of a website/app 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

If you’re having difficulty understanding what I’m saying or what this Animated Sign and Login Page is, you can ask me in the comment.

Code By	Coding thai
Language Used	HTML And CSS
Responsive	Yes
External Link / Dependencies	Yes

There are three types of styles to connect CSS with HTML files: inline CSS, Internal CSS, and External CSS. For Inline CSS, we have to write the CSS code inside the HTML code using style Attribute elements. For internal CSS, we have to use the Style tag in the Head section of the HTML File. We have used this internal CSS in the section below. Last is External CSS. We have to create another CSS File in the same folder for this.

Table of Contents

Preview of Animated Sign up and Login Page

In this preview, we have used internal CSS in the code. We must write the code in the head section using the Style tag in the internal CSS. We must write the code in <Style> CSS code </style> in the Head section in the HTML file. This code is run in Codepen.io.

See the Pen Animated sign up and login by Coding thai (@Codingthai) on CodePen.

Animated Sign up and Login Page using HTML and CSS [Source code]

To create an animated Sign up and login page, First, you have to create two files (HTML and CSS) with the named index.html and style.css in the same folder and link the CSS files to HTML. After that, paste the code below, the HTML code in index.html, and the PAE CSS code in style.css. That’s all after pasting the code.

First, create an HTML file named index.html, paste the HTML code below, and save it. Remember to give the file a .html extension.

<!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="css/style.css">
  <title>Sign in & Sign up</title>
</head>
<body>
  <div class="wrapper">
    <div class="form-container sign-up">
      <form action="#">
        <h2>sign up</h2>
        <div class="form-group">
          <input type="text" required>
          <label for="">username</label>
          <i class="fas fa-user"></i>
        </div>
        <div class="form-group">
          <input type="email" required>
          <label for="">email</label>
          <i class="fas fa-at"></i>
        </div>
        <div class="form-group">
          <input type="text" required>
          <label for="">address</label>
          <i class="fas fa-user"></i>
        </div>
        <div class="form-group">
          <input type="password" required>
          <label for="">password</label>
          <i class="fas fa-lock"></i>
        </div>
        <div class="form-group">
          <input type="password" required>
          <label for="">confirm password</label>
          <i class="fas fa-lock"></i>
        </div>
        <button type="submit" class="btn">sign up</button>
        <div class="link">
          <p>You already have an account?<a href="#" class="signin-link"> sign in</a></p>
        </div>
      </form>
    </div>
    <div class="form-container sign-in">
      <form action="#">
        <h2>login</h2>
        <div class="form-group">
          <input type="text" required>
          <i class="fas fa-user"></i>
          <label for="">username</label>
        </div>
        <div class="form-group">
          <input type="password" required>
          <i class="fas fa-lock"></i>
          <label for="">password</label>
        </div>
        <div class="forgot-pass">
          <a href="#">forgot password?</a>
        </div>
        <button type="submit" class="btn">login</button>
        <div class="link">
          <p>Don't have an account?<a href="#" class="signup-link"> sign up</a></p>
        </div>
      </form>
    </div>
  </div>
  <script src="https://kit.fontawesome.com/9e5ba2e3f5.js" crossorigin="anonymous"></script>
  <script src="js/main.js"></script>
</body>
</html>

After pasting the HTML code, you must create a second CSS file named style.css. Paste the code below on it and save it. Again, remember to give the CSS file a .css extension.

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

:root {
  --mainColor: #89216b;
  --whiteColor: #ffffff;
  --titleColor: #555555;
  --labelColor: #333333;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

body {
  background: linear-gradient(to right, #da4453, var(--mainColor));
  font-weight: 400;
  min-height: 100vh;
  display: grid;
  place-content: center;
  overflow: hidden;
}

.wrapper {
  position: relative;
  width: 35rem;
  height: 50rem;
}

@media (min-width: 540px) {
  .wrapper {
    width: 40rem;
  }
}

.wrapper .form-container {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: var(--whiteColor);
  border-radius: 0.5rem;
  box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.2);
}

.wrapper .form-container form h2 {
  font-size: 3rem;
  text-align: center;
  text-transform: capitalize;
  color: var(--titleColor);
}

.wrapper .form-container form .form-group {
  position: relative;
  width: 32rem;
  margin: 3rem 0;
}

.wrapper .form-container form .form-group i,
.wrapper .form-container form .form-group label {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.6rem;
  text-transform: capitalize;
  color: var(--labelColor);
  padding: 0 0.5rem;
  pointer-events: none;
  transition: all 0.5s ease;
}

.wrapper .form-container form .form-group i {
  left: 0.5rem;
}

.wrapper .form-container form .form-group label {
  left: 2.5rem;
}

.wrapper .form-container form .form-group input {
  width: 100%;
  height: 4rem;
  padding: 0 1rem;
  border-radius: 0.5rem;
  border: none;
  outline: none;
  border: 0.1rem solid var(--labelColor);
  font-size: 1.6rem;
  color: var(--labelColor);
  background: transparent;
}

form .form-group input:focus ~ label,
form .form-group input:valid ~ label,
form .form-group input:focus ~ i,
form .form-group input:valid ~ i {
  top: 0 !important;
  font-size: 1.2rem !important;
  background-color: var(--whiteColor);
}

.wrapper .form-container form .forgot-pass {
  margin: -1.5rem 0 1.5rem;
}

.wrapper .form-container form .forgot-pass a {
  color: var(--labelColor);
  text-decoration: none;
  font-size: 1.4rem;
  text-transform: capitalize;
  transform: all 0.5s ease;
}

.wrapper .form-container form .forgot-pass a:hover {
  color: var(--mainColor);
}

.wrapper .form-container form .btn {
  background: linear-gradient(to right, #da4453, var(--mainColor));
  color: var(--whiteColor);
  text-transform: capitalize;
  width: 100%;
  height: 4rem;
  font-size: 1.6rem;
  font-weight: 500;
  outline: none;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.4);
}

.wrapper .form-container form .link {
  text-align: center;
  font-size: 1.4rem;
  color: var(--labelColor);
  margin: 2.5rem 0;
}

.wrapper .form-container form .link a {
  text-transform: capitalize;
  color: var(--mainColor);
  text-decoration: none;
  font-weight: 600;
  transition: all 0.5s ease;
}

.wrapper .form-container form .link a:hover {
  color: #da4453;
}

.wrapper .sign-up {
  transform: rotate(7deg);
}

.wrapper.animated-signin .form-container.sign-in {
  animation: signin-flip 1s ease-in-out forwards;
}

@keyframes signin-flip {
  0% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(-50rem) scale(1.1);
  }

  100% {
    transform: translateX(0) rotate(7deg) scale(1);
  }
}

.wrapper.animated-signin .form-container.sign-up {
  animation: rotatecard 0.7s ease-in-out forwards;
  animation-delay: 0.3s;
}

@keyframes rotatecard {
  0% {
    transform: rotate(7deg);
  }

  100% {
    transform: rotate(0);
    z-index: 1;
  }
}

.wrapper.animated-signup .form-container.sign-up {
  animation: signup-flip 1s ease-in-out forwards;
}

@keyframes signup-flip {
  0% {
    transform: translateX(0);
    z-index: 1;
  }

  50% {
    transform: translateX(50rem) scale(1.1);
  }

  100% {
    transform: translateX(0) rotate(7deg) scale(1);
  }
}

.wrapper.animated-signup .form-container.sign-in {
  transform: rotate(7deg);
  animation: rotatecard 0.7s ease-in-out forwards;
  animation-delay: 0.3s;
}

@keyframes rotatecard {
  0% {
    transform: rotate(7deg);
  }

  100% {
    transform: rotate(0);
    z-index: 1;
  }
}

That’s all. After pasting the code, your code will be successfully run. If you get any error/problem in the code, just comment or contact me on social media.

Output Result

Conclusion

After creating this Animated Sign and Login Page, you can easily create one. This project will also teach you about different properties of CSS. How to do animation on CSS