Awesome Login Form Design Using HTML & CSS

Hello readers, Today in this blog you'll learn how to create a Login Form Design using only HTML & CSS. Earlier I have shared many blogs on How to Create a Signup Form Design Using HTML and CSS. And, now I'm going to create a Modal Login Form using only HTML & CSS.

If you're feeling difficulty to understand what I am saying. You can watch a full video tutorial on this program (Modal Login Form).

Video Tutorial of Modal Login Form Design

As you have seen the pure CSS Modal Login Form Design in the video. This form is very simple and easy to create. If you are a beginner and you know HTML & CSS then you can also create this type of Modal Login Form. But if you know JavaScript then you can add advanced features in this form and take this program at the next level.

If you like this program ( Login Form Design) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down. You can use this Modal or Popup Login Form on your websites, projects, and HTML pages.

Login Form Design [Source Codes]

To create this program (Modal Login Form). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste these following codes in your file. You can also download the source code files through the given link. Click here to download source code files.

HTML FILE:

<!DOCTYPE html>
<!--Created by | PakiCoder-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://kit.fontawesome.com/47bc99a80b.js" crossorigin="anonymous"></script>
    <title>Login Form</title>
    <link rel="stylesheet" href="loginform.css">
</head>

<body>
    <main class="container">
        <h2>Login</h2>
        <form action="">
            <div class="input-field">
                <input type="text" name="username" placeholder="Username">
                <div class="underline"></div>
            </div>
            <div class="input-field">
                <input type="password" name="password" placeholder="Password">
                <div class="underline"></div>
            </div>
            <input type="submit" value="Continue">
        </form>
        <div class="footer">
            <span>Or Connect With Social Media</span>
            <div class="social-fields">
                <div class="social-field twitter">
                    <a href="#">
                        <i class="fab fa-twitter"></i>
                        Sign in with Twitter
                    </a>
                </div>
                <div class="social-field facebook">
                    <a href="#">
                        <i class="fab fa-facebook"></i>
                        Sign in with Facebook
                    </a>
                </div>
            </div>
        </div>

    </main>
</body>

</html>

CSS FILE:

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  outline: none;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  height: 100vh;
  width: 100%;
  background: linear-gradient(115deg, #56d8e4 10%, #9f01ea 90%);
}
.show-btn{
  background: #fff;
  padding: 10px 20px;
  font-size: 20px;
  font-weight: 500;
  color: #3498db;
  cursor: pointer;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}
.show-btn, .container{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

input[type="checkbox"]{
  display: none;
}
.container{
  display: none;
  background: #fff;
  width: 410px;
  padding: 30px;
  box-shadow: 0 0 8px rgba(0,0,0,0.1);
}
#show:checked ~ .container{
  display: block;
}
.container .close-btn{
  position: absolute;
  right: 20px;
  top: 15px;
  font-size: 18px;
  cursor: pointer;
}
.container .close-btn:hover{
  color: #3498db;
}
.container .text{
  font-size: 35px;
  font-weight: 600;
  text-align: center;
}
.container form{
  margin-top: -20px;
}
.container form .data{
  height: 45px;
  width: 100%;
  margin: 40px 0;
}
form .data label{
  font-size: 18px;
}
form .data input{
  height: 100%;
  width: 100%;
  padding-left: 10px;
  font-size: 17px;
  border: 1px solid silver;
}
form .data input:focus{
  border-color: #3498db;
  border-bottom-width: 2px;
}
form .forgot-pass{
  margin-top: -8px;
}
form .forgot-pass a{
  color: #3498db;
  text-decoration: none;
}
form .forgot-pass a:hover{
  text-decoration: underline;
}
form .btn{
  margin: 30px 0;
  height: 45px;
  width: 100%;
  position: relative;
  overflow: hidden;
}
form .btn .inner{
  height: 100%;
  width: 300%;
  position: absolute;
  left: -100%;
  z-index: -1;
  background: -webkit-linear-gradient(right, #56d8e4, #9f01ea, #56d8e4, #9f01ea);
  transition: all 0.4s;
}
form .btn:hover .inner{
  left: 0;
}
form .btn button{
  height: 100%;
  width: 100%;
  background: none;
  border: none;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
}
form .signup-link{
  text-align: center;
}
form .signup-link a{
  color: #3498db;
  text-decoration: none;
}
form .signup-link a:hover{
  text-decoration: underline;
}*{
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
    font-family: "poppins", sans-serif;
}
body{
    background: linear-gradient(180deg, #00ffdd, #00ff4d);
    background-repeat: no-repeat;
    min-height: 100vh;
    min-width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
}
main.container{
    background: white;
    max-width: 400px;
    min-height: 40vh;
    padding: 36px;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}
main h2{
    font-weight: 800;
    font-size: 30px;
    margin-bottom: 36px;
    text-align: center;
    position: relative;
}
main h2::before{
    content: '';
    position: absolute;
    height: 4px;
    width: 90px;
    bottom: -5px;
    border-radius: 8px;
    background: linear-gradient(180deg, #00ffdd, #00ff4d);
}

form{
    display: flex;
    flex-direction: column;
}
.input-field{
    position: relative;
}
form .input-field:first-child{
    margin-bottom: 24px;
}

.input-field .underline::before{
    content: '';
    position: absolute;
    height: 2px;
    width: 100%;
    bottom: -5px;
    left: 0;
    background: rgba(0, 0, 0, 0.2);
}
.input-field .underline::after{
    content: '';
    position: absolute;
    height: 2px;
    width: 100%;
    bottom: -5px;
    left: 0;
    background: linear-gradient(180deg, #00ffdd, #00ff4d);
    transform: scaleX(0);
    transition: all .3s ease-in-out;
}
.input-field input:focus ~ .underline::after{
    transform: scaleX(1);
}
.input-field input{
    outline: none;
    font-size: 18px;
    color: rgba(0, 0, 0, 0.7);
}
.input-field input::placeholder{
    color: rgba(0, 0, 0, 0.5);
}
form input[type="submit"]{
    margin-top: 20px;
    padding: 8px;
    background-image: linear-gradient(to left, #00ffdd, #00ff4d);
    cursor: pointer;
    color: white;
    font-size: 20px;
    font-weight: 500;
    border-radius: 100px;
    transition: all 0.3s ease;
}
form input[type="submit"]:hover{
    letter-spacing: 1.5s;
    background-image: linear-gradient(to right, #00ffdd, #00ff4d);
}

.footer{
    display: flex;
    flex-direction: column;
    margin-top: 20px;
}

.footer span{
    color: rgba(0, 0, 0, 0.7);
    font-size: 18px;
    text-align: center;
}
.footer .social-field{
    padding: 14px;
    border-radius: 100px;
    font-size: 16px;
    width: 100%;
    cursor: pointer;
    margin-top: 18px;
}
.footer .social-field a i{
    margin: 0 16px;
    width: 15px;
}
.footer .social-field a{
    text-decoration: none;
    color: white;
}

.footer .social-field.twitter{
    background: linear-gradient(to right, #3b99f0, #468aca) ;
}
.footer .social-field.facebook{
    background: linear-gradient(to right, #5089f5, #2a56a1);
}

PakiCoder

Video Tutorial of Modal Login Form Design

You might like this:

Login Form Design [Source Codes]

Thanks for visiting, Keep visiting.

Post a Comment

Post a Comment

About Us

Formulir Kontak