MASIGNASUKA101
3757417361466409779

Beautiful Transparent Login Form Using HTML and CSS

Beautiful Transparent Login Form Using HTML and CSS
Add Comments
Sunday, January 24, 2021

Beautiful Transparent Login Form Using HTML and CSS

In this article, I am going to learn how to create a transfer login form. Currently, the login form is one of the most important parts of web design. Earlier I shared with you the design of many types of login forms. However, this design is a little different.

 This is a transparent login form which means you can show the background as per your choice. In this case, I have used a picture in the background. The login form is the gateway to an account. In case of any social media or community site, you can access your account with the help of a login form. Like the general form, there are all kinds of facilities here. There is space to input email ID and password for login and there is a submit button. A significant point here is that when you click on the holder to input the email ID and password, the level will go up to -18 px. I only used HTML and CSS programming code to make it. No javascript code is used here. If you have a little knowledge of HTML and CSS, you can easily build it. Hope you like this design like other design login forms.

 Watch the video tutorial below to know how to create this transparent login form step by step.


 Below I have shown in full step by step which programming code I am using to create any element. 

Use HTML code to create this structure

First of all, I used some amount of HTML code to create space to input email ID and password.

<!-- Html Code -->
    <div class="formBox">
        <h2>Login</h2>
        <form>
            <div class="inputBox">
                <input type="text" value="" name="" required><!--email holder-->
                <label>User Name</label>
            </div>
            <!-- password holder -->
            <div class="inputBox">
                <input type="password" value="" name="" autocomplete="off" required>
                <label>Password</label>
            </div>
            <!-- Submit Button-->
            <input type="submit"/>
        </form>
    </div>


Use css code to design the background

The following CSS codes have helped to design the background. In this case I have used a picture in the background. You can use any other image or color you like.

body{
    margin0;
    padding0;
    backgroundurl("image.jpeg");
    background-sizecover;
    background-attachmentfixed;
    displayflex;
    justify-contentcenter;
    align-itemscenter;
    min-height100vh;
    font-family'Montserrat',sans-serif;
    color#fff;
}
.formBox{
    width400px;
    backgroundrgba(0,0,0,0.7);
    border-radius10px;
    padding0 24px 48px;
    box-shadow0 1px 20px 5px rgba(255,255,255,0.5);
    box-sizingborder-box;

}
.formBox h2{
    line-height48px;
    margin24px 0;
    letter-spacing2px;
    text-aligncenter;
}

 

Design the placeholder and submit buttons

I used the following CSS codes to design the email ID and password input placeholder and to design the submit button.

.formBox .inputBox{
    positionrelative;
}
.formBox .inputBox input{
    width100%;
    padding10px 0;
    font-size1rem;
    color#fff;
    margin-bottom30px;
    bordernone;
    outlinenone;
    border-bottom1px solid #fff;
    backgroundtransparent;
}
/* submit button */
.formBox input[type="submit"]{
    background#fcdb00;
    bordernone;
    outlinenone;
    color#333;
    padding10px 20px;
    border-radius10px;
    font-weight600;
    cursorpointer;
}
/* add button hover effect*/
.formBox input[type="submit"]:hover{
    background#a5b00c;
}


Create the label in the login form

A significant point of this login form is its level. In general, labels look like placeholders. But when you click on that placeholder, the labels will go up to -18 px and turn yellow. As a result, it looks much more professional. The following CSS codes have been used to create and design these labels.

.formBox .inputBox label{
    positionabsolute;
    top0;
    left0;
    font-size1rem;
    pointer-eventsnone;
    transition0.5s;
}
/* add lebel hover effect*/
.formBox .inputBox input:focus ~ label,
.formBox .inputBox input:valid ~ label{
    top-18px;
    left0;
    font-size14px;
    color#fcdb00;
}

 We hope this tutorial has helped you to create a login design. If you have any problems, you can definitely let me know by commenting. Thank you so much for reading this article to the end.



Thank you, Please Visit again