Responsive Animated Login and Signup form in HTML, CSS & JavaScript

Responsive Animated Login and Signup form in HTML, CSS & JavaScript


Hello developers, today in this blog you'll learn to create a Responsive Animated Login and Signup form in HTML, CSS & JavaScript.

In this blog (Responsive Animated Login and Sign Form), there are two forms where you can find two toggle buttons at the top of the form which is labeled as Login and Signup. When you click the signup button, the login form will slide you to the signup form that is, it slides from the right to the left side.

When you click on the login button, the signup form will slide you to the login form that is from the left to the right.

The javaScript function is used only to slide the form on a button click. When you click on the signup button, the login form will slide from login text to signup text, and when you click the login button, the signup form slide from signup text to login text. This function is performed by JavaScript.

The source code of this Responsive Animated Login and Signup Form is given below, you can copy the source code of this program. You can use this Responsive Animated Login and Registration Form with your creativity and can take this form to the next level.

Responsive Animated Login and Signup Form [Source Code]

To make this website (Responsive Animated Login and Signup Form), you need to create three files: an HTML file, a CSS file, & a JavaScript file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.

<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Login and signup Form || Learningrobo</title> <link rel="stylesheet" href="style.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div class="wrapper"> <div class="title-text"> <div class="title login"> <ins> Login Form </ins> </div> <div class="title signup"> <ins> Signup Form </ins> </div> </div> <div class="form-container"> <div class="slide-controls"> <input type="radio" name="slide" id="login" checked> <input type="radio" name="slide" id="signup"> <label for="login" class="slide login">Login</label> <label for="signup" class="slide signup">Signup</label> <div class="slider-tab"></div> </div> <div class="form-inner"> <form action="#" class="login"> <div class="field"> <input type="text" placeholder="Email Address" required> </div> <div class="field"> <input type="password" placeholder="Password" required> </div> <div class="pass-link"> <a href="#">Forgot password?</a> </div> <div class="field btn"> <div class="btn-layer"></div> <input type="submit" value="Login"> </div> <div class="signup-link"> Not a member? <a href="">Signup now</a> </div> </form> <form action="#" class="signup"> <div class="field"> <input type="text" placeholder="Email Address" required> </div> <div class="field"> <input type="password" placeholder="Password" required> </div> <div class="field"> <input type="password" placeholder="Confirm password" required> </div> <div class="field btn"> <div class="btn-layer"></div> <input type="submit" value="Signup"> </div> </form> </div> </div> </div> <script src="script.js"> </script> </body> </html>

CSS provides style to an HTML page. To make the page attractive create a CSS file with the name style.css and remember that you have to create a file with a .css extension.

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
html,body{
  display: grid;
  height: 100%;
  width: 100%;
  place-items: center;
  background-color: #85FFBD;
background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);

}
::selection{
  background: #85FFBD;
  color: #fff;
}
.wrapper{
  overflow: hidden;
  max-width: 420px;
  background: #12192c;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.wrapper .title-text{
  display: flex;
  width: 200%;
}
.wrapper .title{
    color:#85FFBD;
  width: 50%;
  font-size: 35px;
  font-weight: 600;
  text-align: center;
  transition: all 0.6s cubic-bezier(0.68,-0.55,0.265,1.55);
}
.wrapper .slide-controls{
  position: relative;
  display: flex;
  height: 50px;
  width: 100%;
  overflow: hidden;
  margin: 30px 0 10px 0;
  justify-content: space-between;
  border-radius: 10px;
}
.slide-controls .slide{
  height: 100%;
  width: 100%;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  line-height: 48px;
  cursor: pointer;
  z-index: 1;
  transition: all 0.6s ease;
}
.slide-controls label.signup{
  color: #85FFBD;
}
.slide-controls .slider-tab{
  position: absolute;
  height: 100%;
  width: 50%;
  left: 0;
  z-index: 0;
  border-radius: 5px;
  background-color: #85FFBD;
background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);
  transition: all 0.6s cubic-bezier(0.68,-0.55,0.265,1.55);
}
input[type="radio"]{
  display: none;
}
#signup:checked ~ .slider-tab{
  left: 50%;
}
#signup:checked ~ label.signup{
  color: #000;
  cursor: default;
  user-select: none;
}
#signup:checked ~ label.login{
  color: #fff;
}
#login:checked ~ label.signup{
  color: #fff;
}
#login:checked ~ label.login{
    color: #000;
  cursor: default;
  user-select: none;
}
.wrapper .form-container{
  width: 100%;
  overflow: hidden;
}
.form-container .form-inner{
  display: flex;
  width: 200%;
}
.form-container .form-inner form{
  width: 50%;
  transition: all 0.6s cubic-bezier(0.68,-0.55,0.265,1.55);
}
.form-inner form .field{
  height: 50px;
  width: 100%;
  margin-top: 20px;
}
.form-inner form .field input{
  height: 100%;
  width: 100%;
  outline: none;
  padding-left: 15px;
  border-radius: 5px;
  border: 1px solid lightgrey;
  border-bottom-width: 2px;
  font-size: 17px;
  transition: all 0.3s ease;
}
.form-inner form .field input:focus{
  border-color: #85FFBD;
  /* box-shadow: inset 0 0 3px #fb6aae; */
}
.form-inner form .field input::placeholder{
  color: #999;
  transition: all 0.3s ease;
}
form .field input:focus::placeholder{
  color: #b3b3b3;
}
.form-inner form .pass-link{
  margin-top: 5px;
}
.form-inner form .signup-link{
  text-align: center;
  margin-top: 30px;
}
.form-inner form .pass-link a,
.form-inner form .signup-link a{
  color: #85FFBD;
  text-decoration: none;
}
.form-inner form .pass-link a:hover,
.form-inner form .signup-link a:hover{
  text-decoration: underline;
}
form .btn{
  height: 50px;
  width: 100%;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
}
form .btn .btn-layer{
  height: 100%;
  width: 300%;
  position: absolute;
  left: -100%;
  background-color: #85FFBD;
background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);
  border-radius: 5px;
  transition: all 0.4s ease;;
}
form .btn:hover .btn-layer{
  left: 0;
}
form .btn input[type="submit"]{
  height: 100%;
  width: 100%;
  z-index: 1;
  position: relative;
  background: none;
  border: none;
  color: #000;
  padding-left: 0;
  border-radius: 5px;
  font-size: 20px;
  font-weight: 500;
  cursor: pointer;
}

.signup-link{
    color:#fff;
}

JavaScript makes the page work functionally. At last, create a JavaScript file with the name of script.js and remember that you've got need to make a file with a .js extension.

const loginText = document.querySelector(".title-text .login"); const loginForm = document.querySelector("form.login"); const loginBtn = document.querySelector("label.login"); const signupBtn = document.querySelector("label.signup"); const signupLink = document.querySelector("form .signup-link a"); signupBtn.onclick = (()=>{ loginForm.style.marginLeft = "-50%"; loginText.style.marginLeft = "-50%"; }); loginBtn.onclick = (()=>{ loginForm.style.marginLeft = "0%"; loginText.style.marginLeft = "0%"; }); signupLink.onclick = (()=>{ signupBtn.click(); return false; });

We hope you would like this Responsive Animated Login and Signup form in HTML, CSS & JavaScript.

Thank you for reading our blog. If you face any problem in creating this Responsive Animated Login and Signup form in HTML, CSS & JavaScript, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.

 

Thank you
Learning robo team

إرسال تعليق

Thank you
Learning robo team

Post a Comment (0)

أحدث أقدم
Learning Robo says...
code copied
Welcome