Legend Login Form with Moving Button using HTML CSS JS

By /

Ever tried to click a button that just won’t sit still? This fun login form project brings that quirky idea to life using transform: translate properties in CSS and a bit of JavaScript. Introducing the Legend Login Form, a fun and interactive way to showcase frontend creativity! This isn’t just another static login box — it comes with a moving login button that avoids being clicked unless the form fields are correctly filled.

It’s not your average login form — the submit button shifts position when hovered, making it a playful challenge to press unless both username and password fields are filled.

How This Works

This interactive form uses CSS transformations like translateX() and translateY() to move the login button in four directions: left, right, up, and down. When the user hovers over the button and the input fields are still empty, the button keeps dodging interaction. Once both fields are filled correctly, the button stays put, allowing a successful click.

It’s a creative demonstration of how CSS transform and JavaScript event handling can be combined for user interaction and DOM manipulation.

Note: This login UI is made just for fun and educational purposes. It’s not recommended for actual use in real-world applications or production-level login systems. The goal here is to understand event listeners, conditional button states, and the behavior of CSS transform in action.

Use Cases

While this exact UI may not be practical for production, the core idea can be creatively used in:

  • Frontend UI Challenges: Demonstrate CSS transitions and DOM manipulation.
  • Coding Tutorials: Teach students how to use transform, event listeners, and input validation.
  • Interactive Demos: Build engaging games or animations using form elements.

HTML Structure

The HTML lays out a simple login form with username and password fields, along with a checkbox, button, and some fun feedback messages.

<div class="main-container centered-flex">
        <div class="form-container">
            <div class="icon fa fa-user"></div>
            <form class="centered-flex">
                <div class="title">LOGIN</div>
                <div class="msg"></div>
                <div class="field">
                    <input type="text" placeholder="Username" id="uname">
                    <span class="fa fa-user"></span>
                </div>
                <div class="field">
                    <input type="password" placeholder="Password" id="pass">
                    <span class="fa fa-lock"></span>
                </div>
                <div class="action centered-flex">
                    <label for="remember" class="centered-flex">
                        <input type="checkbox" id="remember"> Remember me
                    </label>
                    <a href="#">Forget Password ?</a>
                </div>
                <div class="btn-container">
                    <input type="submit" id="login-btn" value="Login">
                </div>
                <div class="signup">Don't have an Account?<a href="#"> Sign up</a></div>
            </form>
        </div>
</div>

The HTML is wrapped inside a container with a centered layout using the centered-flex class. This makes it easier to position the entire legend login form in the center of the screen — a simple trick that instantly improves UI balance.

This base also includes a dynamic message box (.msg) to show validation status, and proper semantic tags help maintain structure and readability.

Styling with CSS

The CSS brings personality to this legend login form with moving button. It’s designed with a sleek, dark UI and uses the transform property to animate the movement of the login button.

@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');

.main-container {
    min-height: 100vh;
    min-width: 450px;
    font-family: 'calibri';
}

.centered-flex {
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-container {
    width: 400px;
    height: 480px;
    display: grid;
    position: relative;
}

.icon {
    position: absolute;
    width: 85px;
    font-size: 50px;
    display: grid;
    height: 85px;
    place-content: center;
    border: 1px solid #2a2a2a;
    z-index: 1;
    justify-self: center;
    border-radius: 50%;
    background: #0e0e0e;
}

.fa {
    color: #a2a2a2;
}

form {
    flex-direction: column;
    padding: 25px 25px 10px;
    height: 440px;
    border-radius: 30px;
    background: rgba(19, 19, 19, 0.736);
    border: 1px solid rgba(255, 255, 255, 0.097);
    position: absolute;
    width: 100%;
    bottom: 0;
}

.title {
    position: relative;
    margin: 40px 0;
    font-size: 20px;
    font-weight: bold;
    color: white;
}

.msg {
    color: #fa2929;
    position: absolute;
    top: 25%;
}

.field {
    display: flex;
    position: relative;
    width: 100%;
}

.field .fa {
    position: absolute;
    font-size: 14px;
    right: 10px;
    bottom: 10px;
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px rgb(14 14 14) inset;
}

input:-webkit-autofill {
    -webkit-text-fill-color: #bababa !important;
}

form input {
    display: block;
    outline: none;
    width: 100%;
    border: none;
    font-size: 16px;
    color: #d2d2d2;
    margin: 25px 0 5px;
    caret-color: #cccccc;
    background: transparent;
    padding: 10px 25px 3px 0;
    border-bottom: 1px solid #404040;
}

.action {
    justify-content: space-between;
    width: 100%;
    font-size: 14px;
}

.action label {
    cursor: pointer;
    color: #7d7d7d;
}

.action input {
    width: auto;
    margin: 0 8px 0 0;
    cursor: pointer;
}

a {
    text-decoration: none;
    color: #9b9b9b;
}

.btn-container {
    padding: 20px;
    transition: .2s linear;
}

#login-btn {
    padding: 5px 20px;
    border: none;
    background: rgb(25, 62, 97);
    color: white;
    font-weight: 600;
    font-size: 16px;
    border-radius: 15px;
    transition: .3s;
    margin: 25px 0;
}

#login-btn:hover {
    cursor: pointer;
}

.signup {
    color: rgb(70, 70, 70);
    margin-top: 10px;
}

.shift-left {
    transform: translateX(-120%);
}

.shift-right {
    transform: translateX(120%);
}

.shift-top {
    transform: translateY(-150%);
}

.shift-bottom {
    transform: translateY(150%);
}

.no-shift {
    transform: translate(0%, 0%);
}

The transformation classes are applied dynamically using JavaScript to make the button jump from one location to another when hovered — unless the form is correctly filled.

Other styling highlights:

  • A circular Font Awesome user icon placed above the form
  • Transparent form background using rgba() for a modern glassy look
  • Subtle hover animations for buttons
  • Autofill handling using input:-webkit-autofill for better UI consistency

By combining these styling techniques, the legend login form delivers both aesthetics and interactivity in a lightweight package.

JavaScript Logic for Button Behavior

Here’s where the magic happens! JavaScript is used to detect whether both input fields (username and password) are filled. If not, the login button activates its “dodging” behavior using a cycling sequence of transformation classes.

const uname = document.querySelector('#uname');
const pass = document.querySelector('#pass');
const btnContainer = document.querySelector('.btn-container');
const btn = document.querySelector('#login-btn');
const form = document.querySelector('form');
const msg = document.querySelector('.msg');
btn.disabled = true;

function shiftButton() {
    showMsg();
    const positions = ['shift-left', 'shift-top', 'shift-right', 'shift-bottom'];
    const currentPosition = positions.find(dir => btn.classList.contains(dir));
    const nextPosition = positions[(positions.indexOf(currentPosition) + 1) % positions.length];
    btn.classList.remove(currentPosition);
    btn.classList.add(nextPosition);
}

function showMsg() {
    const isEmpty = uname.value === '' || pass.value === '';
    btn.classList.toggle('no-shift', !isEmpty);

    if (isEmpty) {
        btn.disabled = true
        msg.style.color = 'rgb(218 49 49)';
        msg.innerText = 'Please fill the input fields before proceeding';
    } else {
        msg.innerText = 'Great! Now you can proceed';
        msg.style.color = '#92ff92';
        btn.disabled = false;
        btn.classList.add('no-shift')
    }
}

btnContainer.addEventListener('mouseover', shiftButton);
btn.addEventListener('mouseover', shiftButton);
form.addEventListener('input', showMsg)
btn.addEventListener('touchstart', shiftButton);

Key features:

  • Input Validation: The script checks for empty fields in real-time.
  • Button Movement: On mouseover or touch, the login button jumps in one of four directions if validation fails.
  • User Feedback: Message text changes from an error (“Please fill the input fields”) to success (“Great! Now you can proceed”).

Once both inputs are filled, the button stays in place (.no-shift class is added), allowing the user to proceed — a simple yet clever way to gamify login validation in this legend login form with moving button.

Final Thoughts

The Legend Login Form with Moving Button is a fun, educational, and interactive frontend project designed to:

  • Demonstrate CSS transform and translate properties
  • Practice DOM manipulation using JavaScript
  • Create engaging, unexpected behavior that leaves a lasting impression

Important Disclaimer: This project is not recommended for production use. The shifting login button is meant to entertain and educate — not frustrate users in a real application. However, the creative logic behind it can be used in gamified interfaces, learning platforms, and frontend development tutorials.

Related Posts

Leave a Comment

Scroll to Top