Design a Responsive Sliding Login & Registration Form using HTML CSS & JavaScript

Last Updated : 07 Dec, 2023

In this article, we will see how to create the Responsive Sliding Login & Registration Form using HTML CSS & JavaScript, along with understanding its implementation through the illustration.

Many websites, nowadays, implement sliding login & registration forms for their sites. A Registration form is used to register or create a new account for a new user for a website and a login form is used to enter the details of a registered user into their particular account or portal. So, many websites implement these two approaches into two different pages. Enhance the user experience by providing smooth sliding animations when switching between login and registration forms. The integrated button at the top simplifies user selection. Perfect for websites seeking a streamlined and modern approach to user authentication.

Sliding Login & Registration Form

Approach:

Organize files with “index.html,” “style.css,” and “index.js” in a project folder, including a separate file for responsive CSS.
Create a header section for the title, followed by a container div holding login and signup forms with a form-changing button.
Add a slider div above buttons using CSS for smooth animation, adjusting its position based on button clicks.
Style form-changing buttons with CSS to center and disable border/outline, using flexbox properties.
Sliding forms below the button div, adjusting width and positioning with CSS, and utilize JavaScript to toggle classes for smooth transitions.

Example: This example illustrates how to build a responsive sliding login & signup form using HTML CSS & Javascript.

Javascript

let signup = document.querySelector(".signup");
let login = document.querySelector(".login");
let slider = document.querySelector(".slider");
let formSection = document.querySelector(".form-section");
 
signup.addEventListener("click", () => {
    slider.classList.add("moveslider");
    formSection.classList.add("form-section-move");
});
 
login.addEventListener("click", () => {
    slider.classList.remove("moveslider");
    formSection.classList.remove("form-section-move");
});

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, 
                         initial-scale=1.0">
    <title>GeeksforGeeks</title>
    <link rel="stylesheet"
          href="style.css">
</head>
 
<body>
    <header>
        <h1 class="heading">GeeksforGeeks</h1>
        <h3 class="title">Sliding Login & Registration Form</h3>
    </header>
 
    <!-- container div -->
    <div class="container">
 
        <!-- upper button section to select
             the login or signup form -->
        <div class="slider"></div>
        <div class="btn">
            <button class="login">Login</button>
            <button class="signup">Signup</button>
        </div>
 
        <!-- Form section that contains the
             login and the signup form -->
        <div class="form-section">
 
            <!-- login form -->
            <div class="login-box">
                <input type="email"
                       class="email ele"
                       placeholder="youremail@email.com">
                <input type="password"
                       class="password ele"
                       placeholder="password">
                <button class="clkbtn">Login</button>
            </div>
 
            <!-- signup form -->
            <div class="signup-box">
                <input type="text"
                       class="name ele"
                       placeholder="Enter your name">
                <input type="email"
                       class="email ele"
                       placeholder="youremail@email.com">
                <input type="password"
                       class="password ele"
                       placeholder="password">
                <input type="password"
                       class="password ele"
                       placeholder="Confirm password">
                <button class="clkbtn">Signup</button>
            </div>
        </div>
    </div>
    <script src="index.js"></script>
</body>
</html>

CSS

@import url(
"https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
 
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}
 
body {
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 30px;
    background-color: rgb(231, 231, 231);
}
 
header {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
 
.heading {
    color: green;
}
 
.title {
    font-weight: 400;
    letter-spacing: 1.5px;
}
 
.container {
    height: 600px;
    width: 500px;
    background-color: white;
    box-shadow: 8px 8px 20px rgb(128, 128, 128);
    position: relative;
    overflow: hidden;
}
 
.btn {
    height: 60px;
    width: 300px;
    margin: 20px auto;
    box-shadow: 10px 10px 30px rgb(254, 215, 188);
    border-radius: 50px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
 
.login,
.signup {
    font-size: 22px;
    border: none;
    outline: none;
    background-color: transparent;
    position: relative;
    cursor: pointer;
}
 
.slider {
    height: 60px;
    width: 150px;
    border-radius: 50px;
    background-image: linear-gradient(to right,
            rgb(255, 195, 110),
            rgb(255, 146, 91));
    position: absolute;
    top: 20px;
    left: 100px;
    transition: all 0.5s ease-in-out;
}
 
.moveslider {
    left: 250px;
}
 
.form-section {
    height: 500px;
    width: 1000px;
    padding: 20px 0;
    display: flex;
    position: relative;
    transition: all 0.5s ease-in-out;
    left: 0px;
}
 
.form-section-move {
    left: -500px;
}
 
.login-box,
.signup-box {
    height: 100%;
    width: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0px 40px;
}
 
.login-box {
    gap: 50px;
}
 
.signup-box {
    gap: 30px;
}
 
.ele {
    height: 60px;
    width: 400px;
    outline: none;
    border: none;
    color: rgb(77, 77, 77);
    background-color: rgb(240, 240, 240);
    border-radius: 50px;
    padding-left: 30px;
    font-size: 18px;
}
 
.clkbtn {
    height: 60px;
    width: 150px;
    border-radius: 50px;
    background-image: linear-gradient(to right,
            rgb(255, 195, 110),
            rgb(255, 146, 91));
    font-size: 22px;
    border: none;
    cursor: pointer;
}
 
/* For Responsiveness of the page */
 
@media screen and (max-width: 650px) {
    .container {
        height: 600px;
        width: 300px;
    }
 
    .title {
        font-size: 15px;
    }
 
    .btn {
        height: 50px;
        width: 200px;
        margin: 20px auto;
    }
 
    .login,
    .signup {
        font-size: 19px;
    }
 
    .slider {
        height: 50px;
        width: 100px;
        left: 50px;
    }
 
    .moveslider {
        left: 150px;
    }
 
    .form-section {
        height: 500px;
        width: 600px;
    }
 
    .form-section-move {
        left: -300px;
    }
 
    .login-box,
    .signup-box {
        height: 100%;
        width: 300px;
    }
 
    .ele {
        height: 50px;
        width: 250px;
        font-size: 15px;
    }
 
    .clkbtn {
        height: 50px;
        width: 130px;
        font-size: 19px;
    }
}
 
@media screen and (max-width: 320px) {
    .container {
        height: 600px;
        width: 250px;
    }
 
    .heading {
        font-size: 30px;
    }
 
    .title {
        font-size: 10px;
    }
 
    .btn {
        height: 50px;
        width: 200px;
        margin: 20px auto;
    }
 
    .login,
    .signup {
        font-size: 19px;
    }
 
    .slider {
        height: 50px;
        width: 100px;
        left: 27px;
    }
 
    .moveslider {
        left: 127px;
    }
 
    .form-section {
        height: 500px;
        width: 500px;
    }
 
    .form-section-move {
        left: -250px;
    }
 
    .login-box,
    .signup-box {
        height: 100%;
        width: 250px;
    }
 
    .ele {
        height: 50px;
        width: 220px;
        font-size: 15px;
    }
 
    .clkbtn {
        height: 50px;
        width: 130px;
        font-size: 19px;
    }
}