Login Form with floating placeholder and light button 2023

Login Form with floating placeholder and light button

Hey there! In this blog post, we’ll be walking through the creation of a login form with a floating placeholder and light button. This is a great way to add some extra flair to your forms and make them stand out from the crowd. Let’s get started!

First, we’ll need to create our HTML structure. We’ll start with a simple form with an email and password field. Then, we’ll add a class of “floating-placeholder” to our email input. This will allow us to style our placeholder so it floats above the input field when the field is empty.

This is the CSS coding of form

    body {
        font-family: Arial, sans-serif;
        background-color: #f4f4f4;
    }
    .form-container {
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0,0,0,0.3);
        width: 400px;
        margin: 50px auto;
        padding: 40px;
        position: relative;
    }
    .form-container h2 {
        text-align: center;
        margin-bottom: 20px;
    }
    .form-group {
        position: relative;
        margin-bottom: 20px;
    }
    .form-group input {
        width: 100%;
        padding: 10px 0;
        border: none;
        border-bottom: 1px solid #ccc;
        outline: none;
        font-size: 16px;
    }
    .form-group label {
        position: absolute;
        top: 0;
        left: 0;
        font-size: 16px;
        color: #999;
        pointer-events: none;
        transition: 0.2s ease all;
    }
    .form-group input:focus + label,
    .form-group input:not(:placeholder-shown) + label {
        top: -20px;
        font-size: 12px;
        color: #333;
    }
    .btn {
        background-color: #fff;
        border: 1px solid #ccc;
        color: #333;
        padding: 10px 20px;
        border-radius: 5px;
        font-size: 16px;
        cursor: pointer;
        transition: 0.2s ease all;
    }
    .btn:hover {
        background-color: #333;
        color: #fff;
    }

This is the HTML coding of form

<div class="form-container">
    <h2>Login</h2>
    <form>
        <div class="form-group">
            <input type="text" name="username" id="username" placeholder=" ">
            <label for="username">Username</label>
        </div>
        <div class="form-group">
            <input type="password" name="password" id="password" placeholder=" ">
            <label for="password">Password</label>
        </div>
        <button type="submit" class="btn">Login</button>
    </form>
</div>

This code creates a login form with a white background and a subtle box shadow. The placeholders for the username and password fields are hidden until the user clicks on the field, at which point they float above the field to indicate what the user should enter. The login button is a light color with a thin border and turns dark on hover to indicate interactivity.