How To Create Login Form In HTML CSS & JavaScript

Today In this article, we’ll show you how to create an Animated Login Form Design Using HTML CSS & JavaScript. This type of CSS Login Form is used on the websites For Login & Sign In. This kind of CSS Wavy Login Form looks attractive on the website.

You easily create these Animated Login Form With Wwavy Effect Using HTML CSS & JavaScript. then this article will definitely help you. For this, you need to have an idea about basic HTML, CSS & JS then you can understand the following codes. It is designed in a completely modern way.

Some Information About This CSS Login Form

In this Animated Login Form, at first, on the webpage, there is a login form with a login title, two input fields for Email and password, a login button, and hyperlinks for forget the password. When you click on the input field for typing then the placeholder name moves on the top by wavy animation. Also, input field validate & focus on color change.

Watch the video tutorial to create CSS Login Form

If you want to learn how to make it completely, you can watch the video tutorial below. Here I have shown how I made these CSS Animated Login Form step by step completely beautifully. So you can learn how to make these CSS Sign In Form. This is a youtube video. If you can learn something from the video or if the video seems helpful to you, you must like and subscribe to the video. As a result, I get motivated to create other new designs.

Hopefully, the above video tutorial has helped you to create this CSS Login Form Tutorial. If you like the video tutorial, be sure to like the video and comment on it so I can encourage you to create new designs.

You might like this:

CSS Animated Login Form Design | Source Codes

You have to create HTML, CSS, and JS File For this Site. After creating these files just paste the following codes into your file.

First Step, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension and the images that are used on this website won’t appear. You’ve to download files from the given download button to use.

HTML CODE:

<!DOCTYPE html>
<!-- Created By Codecary -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Login Form</title>
    <link rel="stylesheet" href="style.css">

</head>
<body>

  <div class="container">
    <h1>Login Form</h1>
    <form>
      <div class="form-control">
        <input type="text" required>
        <label>Email</label>
      </div>
      <div class="form-control">
        <input type="password" required>
        <label>Password</label>
      </div>
      <button class="btn">Login</button>
      <p class="text">Don't have an account? <a href="#">Register</a></p>
    </form>
  </div>

  <script src="js.js"></script>
</body>
</html>

After to create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

CSS CODE:

@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');

*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body{
  background-color: rgb(97, 25, 55);
  color: #fff;
  font-family: 'Muli', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
}
.container{
  background-color: rgb(71, 6, 33);
  padding: 20px 40px;
  border-radius: 5px;
}
.container h1{
  text-align: center;
  margin-bottom: 30px;
}
.container a {
  text-decoration: none;
  color: rgb(241, 97, 157);
}
.btn{
  display: inline-block;
  width: 100%;
  cursor: pointer;
  background-color: rgb(241, 97, 157);
  padding: 15px;
  font-family: inherit;
  font-size: 16px;
  border: 0;
  border-radius: 5px;
}
.btn:focus{
  outline: 0;
}
.btn:active{
  transform: scale(0.98);
}
.text{
  margin-top: 30px;
}
.form-control{
  position: relative;
  margin: 20px 0 40px;
  width: 300px;
}
.form-control input{
  background-color: transparent;
  border: 0;
  border-bottom: 2px solid #fff;
  display: block;
  width: 100%;
  padding: 15px 0 10px 0;
  font-size: 18px;
  color: #fff;
}
.form-control input:focus,
.form-control input:valid{
  outline: 0;
  border-bottom-color: rgb(241, 97, 157);
}
.form-control label{
  position: absolute;
  top: 15px;
  left: 0;
}
.form-control label span{
  display: inline-block;
  font-size: 18px;
  min-width: 5px;
  transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.form-control input:focus + label span,
.form-control input:valid + label span{
  color: rgb(241, 97, 157);
  transform: translateY(-30px);
}

After to create a JS file with the name of js.js and paste the given codes in your js file. Remember, you’ve to create a file with .js extension.

JS Code:

const labels = document.querySelectorAll('.form-control label')

labels.forEach(label => {
    label.innerHTML = label.innerText
    .split('')
    .map((letter, idx) => `<span style="transition-delay:${idx * 50}ms">${letter}</span>`)
    .join('')
})

now you’ve successfully created these CSS Login Form. If your code does not work or facing any error/problem to comment down or contact us through the contact page. or you can download images and source codes below the download button.

Related Articles

1 COMMENT

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Categories