Hello Designer in today's blog you will learn how to create a login form using html and css only.

what is in this Login Form ?

1 On focus input field a bottom border came.

2 On hover button a color changing animation will came.

3 On hover Icons icons shape change from curve rectangle to circle.

Design Preview :

Login Form Design View

On Focus Input Field Design View

On Hover Button Design View

On Hover Icons Design View

For input field border form bottom we first use border property none and hide all the border form the input field then user border-bottom property and set the color.

For change color of the button on hover we use hover pseudo class

For change the shape of the icons on hover we use hover pseudo class and border radius property.

Video Tutorial :

Code Preview :

HTML FILE

 
  
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Form Design || Coding Zone</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">

</head>
<body>

    <div class="container">

        <h2>Login</h2>

        <div class="input-field">

            <input type="text" placeholder="Email or Phone">

        </div>

        <div class="input-field">

            <input type="password" placeholder="Password">

        </div>

        <div class="input-field">

            <input type="checkbox" >
            <label>Remember Me</label>

        </div>

        <button>Login</button>

        <div class="Social-media">

           <a href="#"><i class="fab fa-instagram"></i></a>
           <a href="#"><i class="fab fa-github"></i></a>
           <a href="#"><i class="fab fa-facebook-f"></i></a>
           <a href="#"><i class="fab fa-twitter"></i></a>

        </div>

    </div>
    
</body>
</html>

CSS FILE

 
  
  *{

    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{

    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #333333;
   
}

.container{

    background-color: #252525;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding: 40px;
    border: 2px solid #E6E7E8;
}

h2{

    color: #E6E7E8;
}

.input-field{

   margin-top: 20px;
   width: 250px;
}

.input-field label{

    color: #E6E7E8;
    font-weight: 400;
}

input[type="text"],
input[type="password"]{

    width: 100%;
    border: none;
    background: #211F1f;
    padding: 10px;
    color: #E6E7E8;
    outline: none;

}


input[type="text"]:focus,
input[type="password"]:focus{

  transition: 0.5s linear;
  border-bottom: 1px solid #E6E7E8;

}

.container button{

    cursor: pointer;
    margin-top: 20px;
    padding: 10px 20px;
    font-weight: 700;
    border-radius: 5px;
    border: none;
    outline: none;
    background-color: #0984e3;
    color: #E6E7E8;
}

.container button:hover{


    transition: 0.3s linear;
    color: #0984e3;
    background-color: #E6E7E8;

}

.Social-media{

    margin-top: 20px;
    width: 100%;
    display: flex;
    justify-content: space-evenly;
}

.Social-media a{

   position: relative;
   font-size: 20px;
   background-color: #E6E7E8;
   height: 40px;
   width: 40px;
   border-radius: 2px;
}

.Social-media a:hover{

    transition: 0.5s linear;
    border-radius: 100%;
}

.Social-media a i{

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.Social-media a:nth-child(1){

    color: #fb3958;
}

.Social-media a:nth-child(1):hover{

    color: #E6E7E8;
    background-color: #fb3958;
}


.Social-media a:nth-child(2){

    color: #211F1f;
}

.Social-media a:nth-child(2):hover{

    color: #E6E7E8;
    background-color: #211F1f;
}


.Social-media a:nth-child(3){

    color: #3b5998;
}

.Social-media a:nth-child(3):hover{

    color: #E6E7E8;
    background-color: #3b5998;
}


.Social-media a:nth-child(4){

    color: #00acee;
}

.Social-media a:nth-child(4):hover{

    color: #E6E7E8;
    background-color: #00acee;
}

Download Full Code Click Here to download full code

You can follow us on for more coding related knowledge

Facebook

Instagram

Linked In

what is in this Login Form ?

Design Preview :

Login Form Design View

On Focus Input Field Design View

On Hover Button Design View

On Hover Icons Design View

Video Tutorial :

Code Preview :

Keep Visiting 😁

Post a Comment

Post a Comment

About Us

Contact Form

Login Form in html and css

what is in this Login Form ?

Design Preview :

Login Form Design View

On Focus Input Field Design View

On Hover Button Design View

On Hover Icons Design View

Video Tutorial :

Code Preview :

Keep Visiting 😁

You might like

Post a Comment

Post a Comment

Contact Form