HTML CSS Login Page Template with Animated label and Submit Button

Last Updated: 2023-06-18 00:31:46

A login page is a web page that provides a user interface for individuals to authenticate themselves and gain access to a specific system or application. It typically consists of a form where users can enter their credentials, such as a username and password, to verify their identity. So, An HTML CSS login page template is a pre-designed structure and styling for a login page. In this post, I will share with you a pre-designed login page template with an animated submit button. I will provide you with the complete source code so that you can customize the design based on your requirements.

 

Please note that this post is only for the design purpose, for form validation, you can check our login form validation and registration from the validation post.

 

HTML Structure of Login Page Template

You already know about the login page. Typically a login page consists of a username and password field. Hence to create a login page template we need to take two input fields one is for username and another one is for password. We will also use some label tags to indicate the input fields.

< div class="loginBox">
    < h2>Login< /h2>
    < form action="#">
        < div class="userInputBox">
            < input type="text" id="usernameInputBox" required>
            < Label for="usernameInputBox">Username< /Label>
        < /div>

        < div class="userInputBox">
            < input type="password" id="passwordInputBox" required>
            < Label for="passwordInputBox">Password< /Label>
        < /div>
        < a href="#" type="submit">
            < !-- span tag for button animation -->
            < span>< /span>
            < span>< /span>
            < span>< /span>
            < span>< /span>
            Submit
        < /a>
    < /form>
< /div>

Explanation of above code block

1. < div class="loginBox">: This creates a container with the class name "loginBox" to hold the login form and related content.
2. < h2>Login< /h2>: This is a heading element that displays the text "Login" to indicate the purpose of the form.
3. < form action="#">: This sets up a form element with the action attribute set to "#" (a placeholder value) which determines where the form data will be sent upon submission.
4. < div class="userInputBox">: This is a container for the username input field and label.
5. < input type="text" id="usernameInputBox" required>: This creates a text input field for the username. The "id" attribute assigns an identifier to the input field, and the "required" attribute specifies that the field must be filled out before the form can be submitted.
6. < Label for="usernameInputBox">Username< /Label>: This creates a label for the username input field. The "for" attribute associates the label with the corresponding input field using the same "id" value.
7. < div class="userInputBox">: This is a container for the password input field and label.
8. < input type="password" id="passwordInputBox" required>: This creates a password input field for the user's password, where the characters are masked for security. The "id" and "required" attributes work similarly to the username input field.
9. < Label for="passwordInputBox">Password< /Label>: This creates a label for the password input field, following the same "id" and "for" association as the username label.
10. < a href="#" type="submit">: This creates an anchor element that serves as the submit button for the form. The "href" attribute is set to "#" as a placeholder, and the "type" attribute is set to "submit" to indicate that it is a form submission button.
11. < span>< /span>: These four empty-span elements are used to create a button animation effect. They can be styled using CSS to achieve the desired visual effect.
12. Submit: This is the text that appears within the submit button.

Please note that this is just an example, you can download the complete source code for here.

 

 

A login page template with an animated label

As you already know that we will create some animation effects for our login form. So now in this section, we will apply an animation effect to the label of the login form. Our plan is initially will keep the label in the middle of the input box and when the user clicks on the input box we will move the label up slowly. 

.userInputBox{
    position: relative;
    margin-bottom: 30px;
}

.userInputBox label{
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px 0;
    font-size: 16px;
    color: #fff;
    pointer-events: none;
    transition: .5s;
}

.userInputBox input{
    width: 100%;
    background: transparent;
    outline: none;
    border: 0;
    color: #fff;
    border-bottom: 1px solid #fff;
    padding: 10px 0;
    margin-bottom: 30px;
    font-size: 16px;
}

.userInputBox input:focus ~ label,
.userInputBox input:valid ~ label{
    top: -20px;
    font-size: 12px;
    color: #f403af;
}

The main idea behind this code is to create a stylish effect for labels in the `.userInputBox` container when the associated input field is focused or has a valid value. It achieves this by using CSS positioning and transitions.

Here's how it works:

1. The `.userInputBox` container is given a `position: relative` property to establish a positioning context for its contents. This allows the child elements to be positioned relative to this container.
2. Each `.userInputBox` container consists of an input field and a label. The label is initially positioned absolutely at the top-left corner of the container using `position: absolute; top: 0; left: 0;`.
3. The label has a white text color (`color: #fff;`) and is given a transparent background (`background: transparent;`). By default, it is positioned in the middle of the input field.
4. When the input field is focused (using `input:focus` selector) or has a valid value (using `input:valid` selector), the adjacent label is selected using the sibling selector `~`.
5. For the selected label, `top: -20px;` moves the label upward by 20 pixels, effectively making it appear above the input field.
6. The `font-size` property is reduced to `12px`, making the label smaller.
7. The label text color is changed to `#f403af`, which is a pinkish color.
8. The `transition` property with a duration of `0.5s` creates a smooth animation when the label moves up or down. The result is that when the user clicks or focuses on the input field, the label smoothly moves up and becomes smaller, creating a visually appealing effect. This design helps to indicate to the user which input field they are interacting with and provides a pleasant user experience. Additionally, if the input field has a valid value, the label will also move up and change color, reinforcing the user's input.

The result is that when the user clicks or focuses on the input field, the label smoothly moves up and becomes smaller, creating a visually appealing effect. This design helps to indicate to the user which input field they are interacting with and provides a pleasant user experience. Additionally, if the input field has a valid value, the label will also move up and change color, reinforcing the user's input.

 

Please note that this is just an example, you can download the complete source code for here.

 

 

A login page template with an animated button

In this section, we will create an animation for our submit button. We will create a border-moving animation effect. 

.loginBox a{
    position: relative;
    color: #f403af;
    display: inline-block;
    text-decoration: none;
    font-size: 16px;
    letter-spacing: 2px;
    padding: 10px 20px;
    border: 0;
    overflow: hidden;
    border-radius: 5px;
    transition: .5s;
}
.loginBox a span{
    position: absolute;
}

.loginBox a span:nth-child(1){
    top: 0;
    left: -100%;
    height: 2px;
    width: 100%;
    background: linear-gradient(90deg, transparent, #f403af);
    animation: toplineAnimation 1s linear infinite;
}

@keyframes toplineAnimation{
    0%{
        left: -100%;
    }
    50%,100%{
        left: 100%;
    }
}

.loginBox a span:nth-child(2){
    top: -100%;
    right:0 ;
    height: 100%;
    width: 2px;
    background: linear-gradient(180deg, transparent, #f403af);
    animation: rightlineAnimation 1s linear infinite;
    animation-delay: .25s;
}

@keyframes rightlineAnimation{
    0%{
        top: -100%;
    }
    50%,100%{
        top: 100%;
    }
}

.loginBox a span:nth-child(3){
    right: -100%;
    bottom:0 ;
    height: 2px;
    width: 100%;
    background: linear-gradient(270deg, transparent, #f403af);
    animation: bottomlineAnimation 1s linear infinite;
    animation-delay: .5s;
}

@keyframes bottomlineAnimation{
    0%{
        right: -100%;
    }
    50%,100%{
        right: 100%;
    }
}

.loginBox a span:nth-child(4){
    bottom: -100%;
    left:0 ;
    height: 100%;
    width: 2px;
    background: linear-gradient(360deg, transparent, #f403af);
    animation: leftlineAnimation 1s linear infinite;
    animation-delay: .75s;
}

@keyframes leftlineAnimation{
    0%{
        bottom: -100%;
    }
    50%,100%{
        bottom: 100%;
    }
}

The main idea behind this code is to create an animated border effect around the `< a>` element inside the `.loginBox` container. This effect gives the impression of a moving border around the button.

Here's how it works:

1. The `< a>` element inside the `.loginBox` container is styled to have no border, a pinkish text color, and a rounded shape.
2. Four `< span>` elements are added inside the `< a>` element. These will serve as the animated lines for the border effect.
3. Each `< span>` element is positioned absolutely within the `< a>` element using `position: absolute;`.
4. The first `< span>` element (`.loginBox a span:nth-child(1)`) represents the top line. It starts positioned outside the `< a>` element to the left (`left: -100%`) and has a height of `2px` and a width of `100%`. It has a gradient background that transitions from transparent to the pinkish color (`background: linear-gradient(90deg, transparent, #f403af);`).
5. The animation for the top line (`@keyframes toplineAnimation`) is defined with two keyframes: at `0%` and at `50%` and `100%`.
6.   - At `0%`, the top line is positioned outside the `< a>` element to the left (`left: -100%`).
     - At `50%` and `100%`, the top line is positioned completely inside the `< a>` element (`left: 100%`), creating the effect of it moving from left to right.
7. Similar animation and positioning techniques are applied to the other three lines (`rightlineAnimation`, `bottomlineAnimation`, `leftlineAnimation`), each representing the right, bottom, and left lines of the animated border, respectively.
8.   - The second line (`rightlineAnimation`) starts positioned outside the `< a>` element at the top and moves from top to bottom.
     - The third line (`bottomlineAnimation`) starts positioned outside the `< a>` element to the right and moves from right to left.
     - The fourth line (`leftlineAnimation`) starts positioned outside the `< a>` element at the bottom and moves from bottom to top.
9. The animation duration is set to `1s`, making each line take 1 second to complete its movement.
10. The `animation-delay` property is used to stagger the start times of the line animations, creating a sequential effect.

The result is that each line animates independently to create a continuously moving border around the button, giving it a visually appealing and dynamic appearance.

 

Please note that this is just an example, you can download the complete source code for here.

 

In conclusion, the login page template with the animated button and label provides an engaging and visually appealing user interface for a login form. The combination of the animated button border and the label animation enhances the overall user experience and adds a touch of modern design.

 

The label animation in the input fields creates an intuitive interaction for users by dynamically moving the labels above the input fields when they are focused or have valid input. This visual cue helps users easily identify the associated input field and provides a smooth transition as they enter their credentials.

 

The animated button border adds a sense of dynamism and sophistication to the login form. The border lines move around the button in a continuous loop, giving it an eye-catching and interactive effect. The use of CSS animations and gradients provides a seamless transition between different states, resulting in a visually pleasing button design.

 

Overall, this login page template demonstrates the creative possibilities that can be achieved with HTML and CSS. By incorporating animated elements, the template not only enhances the aesthetics of the login page but also improves the user experience by guiding users and capturing their attention.