MASIGNASUKA101
239990035665021724

Html Login Form - Download Source Code

Html Login Form - Download Source Code
Add Comments
Saturday, October 24, 2020

how to create this animated login form


Do you want to create an awesome animated login form using only HTML and CSS programming languages?
 If you want it, I'm going to tell you completely how you can do it. The login form is the gateway for your user to access their account. If you can make the login form very stylish and animated at that entrance. Then your user will be attracted to your website. If you want to learn how to create an animated login form using only a common programming language, I will guide you step by step.
 Here I show you an example. I created this following login form here using only HTML and CSS programming language.

How To Create Responsive Login Form Using HTML and CSS

I'll show you how to create this animated login form or add it to your own project or website. The HTML and CSS codes used in this login form are easily written so that you can easily learn and know. For those who want to copy the login form and use it in their own project or website, I have given complete instructions on how to add the required code of this login form to your project. Below are all the codes needed to create this login form for your convenience. You can download the codes by clicking on the download button below. I have also given all these codes below to copy these codes. You can copy that code directly and use it in your project. Hopefully, this login form will make you happy and improve your programming knowledge such as HTML and CSS skills a lot.


Some information about this login form

👉 This login form has been made very nice and professional which is perfect to add or use on a website.

👉 Only plain HTML and CSS code have been added to make it. Also, a small amount of JavaScript programming language has been used to animate this login form.

👉 Like all login forms, this login form has space to input everyone's first user ID and password and has a login button at the bottom. Where the user will log in by clicking.

👉 Animation has been added to the places to input user ID and password. In general, the places to add that name and password are small. But when you click on those blank spaces to enter the user ID and password, those spaces will become much larger which is much more stylish and professional to look at.

👉 Also, the background used to create this login form is completely animated, that is, some animation is always running from the background.


Create This Login Form Follow These Steps

This is a stylish and professional animated login form you will definitely like.

Follow these steps to make it. I have shown you how to add this login form to your project using the following three methods.

Method 1

 First of all, you add this following HTML code to your project or website. To add this HTML code you need to copy the code below and paste it into your project's body tag (<body> Add Code </body>). If you do not know how to paste it, you can follow the structure below.

<!DOCTYPE html>
<html>
<head>
<style>
  ADD CSS Code
</style>
</head>
<body>
 
   Add HTML Code

</body>
</html

 Here I have given complete instructions in this structure on where to add three codes i.e. HTML code, CSS code, and JavaScript code. Where you are told to add HTML code to this structure, here you copy and paste the following HTML code.


HTML TAGS (<body> Add Code </body>)

This code is an HTML code (rename.html). Put this code in the head tags of your project and also in the head tags in the HTML file.

<form class="box" action="index.html" method="post">
  <h1>Login</h1> 
   <!--<div class="input">
        <div class="title"> USERNAME</div>
        <input class="text" type="text" placeholder=""/>
      </div>-->
  <input type="text" name="" placeholder="Username">
  <input type="password" name="" placeholder="Password">
  <a href="http://www.cakecounter.com/" target="_blank" type="submit">Login</a>
</form>



<div class="lines">
                <div class="line"></div>
                <div class="line"></div>
                <div class="line"></div>
                <div class="line"></div>
                <div class="line"></div>
                <div class="line"></div>
                 <!--<div class="input">
        <div class="title"> USERNAME</div>
        <input class="text" type="text" placeholder=""/>
      </div>-->
                <div class="line"></div>
                <div class="line"></div>
                <div class="line"></div>
                <div class="line"></div>
                <div class="line"></div>
                <div class="line"></div>
                <div class="line"></div>
                <div class="line"></div>
                 <!--<div class="input">
        <div class="title"> USERNAME</div>
        <input class="text" type="text" placeholder=""/>
      </div>-->
                <div class="line"></div>
                <div class="line"></div>
                <div class="line"></div>
                <div class="line"></div>
                <div class="line"></div>
            </div>

 

Method 2

 After adding the HTML code you add the CSS code. For this, you copy the CSS code given below and paste it in the head tag of your project. You can follow the structure above for additional help. It says where you will add CSS. As such, you can copy and add the CSS codes given below.

CSS CODE (<head><style> Add code</style></head>)

This code is a CSS code (rename.css). You enter this code in the style tags in the head tags of your project. Also, you put in the style tags in the CSS file.

body{
  margin0;
  padding0;
  font-familysans-serif;
     background-imageurl("https://images.unsplash.com/photo-1513151233558-d860c5398176?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80");
    background-sizecover;
    background-repeatno-repeat;
    background-positiontop;
}
/*border-bottom: 0.065rem solid #fff;
  outline: none;*/
.box{
  width300px;
  padding40px;
  positionabsolute;
  top50%;
  left50%;
  transformtranslate(-50%,-50%);
  background#191919;
  text-aligncenter;
      box-shadow-1px 92px 99px -62px rgba(31072550.27), 0 1px 6px 0 rgba(10482550.48);
    border-radius5px;
}/*border-bottom: 0.065rem solid #fff;
  outline: none;*/
.box h1{
  colorwhite;
  text-transformuppercase;
  font-weight500;
}/*border-bottom: 0.065rem solid #fff;
  outline: none;*/
.box input[type = "text"],.box input[type = "password"]{
  border:0;
  backgroundnone;
  displayblock;
  margin20px auto;
  text-aligncenter;
  border2px solid #3498db;
  /*border-bottom: 0.065rem solid #fff;
  outline: none;*/
  padding14px 10px;
  width200px;
  outlinenone;
  colorwhite;
  border-radius24px;
  transition0.25s;
  
}

.box a
{
  border:0;
  backgroundnone;
  displayblock;
  /*border-bottom: 0.065rem solid #fff;
  outline: none;*/
  margin20px auto;
  text-aligncenter;
  border2px solid #3498db;
  padding14px 10px;
  width200px;
  outlinenone;
  colorwhite;
  /*border-bottom: 0.065rem solid #fff;
  outline: none;*/
  border-radius24px;
  transition0.25s;
  width:10%;
}
.box input[type = "text"]:focus,.box input[type = "password"]:focus{
  width280px;
   -webkit-animation9s colorChange alternate;
  transition height 0.3s, width 0.3s 0.1s
  input:focus ~ .border
  /*border-bottom: 0.065rem solid #fff;
  outline: none;*/
}
.box input[type = "submit"]{
  border:0;
  backgroundnone;
  displayblock;
  margin20px auto;
    /*background-color: #03a9f4;
  padding: 0.625rem 1.25rem;*/
  text-aligncenter;
  border2px solid #2ecc71;
  padding14px 40px;
  outlinenone;
  colorwhite;
  border-radius24px;
  transition0.25s;
  cursorpointer;
}

.box a[type = "submit"]{
  border:0;
  backgroundnone;
  displayblock;
  margin20px auto;
    /*background-color: #03a9f4;
  padding: 0.625rem 1.25rem;*/
  text-aligncenter;
  border2px solid #2ecc71;
  padding14px 40px;
  outlinenone;
  colorwhite;
  border-radius24px;
  transition0.25s;
  cursorpointer;
}/*border-bottom: 0.065rem solid #fff;
  outline: none;*/
.box input[type = "submit"]:hover{
  background#2ecc71;
}

.box a[type = "submit"]:hover{
  background#2ecc71;
}

h1 {
    displayblock;
    font-size2em;
    margin-block-start0.67em;
    margin-block-end0.67em;
    /*border-bottom: 0.065rem solid #fff;
  outline: none;*/
    margin-inline-start0px;
    margin-inline-end0px;
    font-weightbold;
}


@-webkit-keyframes colorChange {
  0%   { border-color#007bff;  }
    /*background-color: #03a9f4;
  padding: 0.625rem 1.25rem;*/
  5%  { border-color#6610f2; }
  10%  { border-color#6f42c1;}
  15%  { border-color#e83e8c; }
  20% { border-color#dc3545;}
   25%   { border-color#fd7e14;  }
  30%  { border-color#ffc107; }
  35%  { border-color#28a745;}
  40%  { border-color#20c997; }
  45%  { border-color#17a2b8;}
  50%  { border-color#6c757d;  }
  /*background-color: #03a9f4;
  padding: 0.625rem 1.25rem;*/
  55%  { border-color#343a40; }
  60%  { border-color#007bff;}
  65%  { border-color#6c757d; }
  70% { border-color#28a745;}
  75% { border-color#17a2b8;}
  80% { border-color#ffc107;}
  85% { border-color#dc3545;}
  /*border-bottom: 0.065rem solid #fff;
  outline: none;*/
  90% { border-color#343a40;}
  95% { border-color#28a745;}
  100% { border-color#20c997;}
}



 

.lines{position:absolute;top:0;left:0;right:0;height:100%;margin:auto;width:100vw;z-index:-1}.lines .line{position:absolute;width:1px;height:100%;top:0;left:50%;background:rgba(255,255,255,.06);overflow:hidden}.lines .line::after{content:"";display:block;position:absolute;height:15vh;width:100%;top:-50%;left:0;background:-webkit-gradient(linear,left top,left bottom,from(rgba(255,255,255,0)),color-stop(75%,#fff),to(#fff));background:linear-gradient(to bottom,rgba(255,255,255,00%,#fff 75%,#fff 100%);-webkit-animation:run 7s 0s infinite;animation:run 7s 0s infinite;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:cubic-bezier(.4,.26,0,.97);animation-timing-function:cubic-bezier(.4,.26,0,.97)}.lines .line:nth-child(1){margin-left:-45%}.lines .line:nth-child(1)::after{-webkit-animation-delay:.5s;animation-delay:.5s}.lines .line:nth-child(3){margin-left:45%}.lines .line:nth-child(3)::after{-webkit-animation-delay:1s;animation-delay:1s}.lines .line:nth-child(4){margin-left:40%}.lines .line:nth-child(4)::after{-webkit-animation-delay:1.5s;animation-delay:1.5s}.lines .line:nth-child(5){margin-left:-40%}.lines .line:nth-child(5)::after{-webkit-animation-delay:2s;animation-delay:2s}.lines .line:nth-child(6){margin-left:35%}.lines .line:nth-child(6)::after{-webkit-animation-delay:2.5s;animation-delay:2.5s}.lines .line:nth-child(7){margin-left:-35%}.lines .line:nth-child(7)::after{-webkit-animation-delay:3s;animation-delay:3s}.lines .line:nth-child(8){margin-left:30%}.lines .line:nth-child(8)::after{-webkit-animation-delay:3.5s;animation-delay:3.5s}.lines .line:nth-child(9){margin-left:-30%}.lines .line:nth-child(9)::after{-webkit-animation-delay:4s;animation-delay:4s}.lines .line:nth-child(10){margin-left:25%}.lines .line:nth-child(10)::after{-webkit-animation-delay:4.5s;animation-delay:4.5s}.lines .line:nth-child(11){margin-left:-25%}.lines .line:nth-child(11)::after{-webkit-animation-delay:5s;animation-delay:5s}.lines .line:nth-child(12){margin-left:20%}.lines .line:nth-child(12)::after{-webkit-animation-delay:5.5s;animation-delay:5.5s}.lines .line:nth-child(13){margin-left:-20%}.lines .line:nth-child(13)::after{-webkit-animation-delay:6s;animation-delay:6s}.lines .line:nth-child(14){margin-left:15%}.lines .line:nth-child(14)::after{-webkit-animation-delay:6.5s;animation-delay:6.5s}.lines .line:nth-child(15){margin-left:-15%}.lines .line:nth-child(15)::after{-webkit-animation-delay:7s;animation-delay:7s}.lines .line:nth-child(16){margin-left:10%}.lines .line:nth-child(16)::after{-webkit-animation-delay:7.5s;animation-delay:7.5s}.lines .line:nth-child(17){margin-left:-10%}.lines .line:nth-child(17)::after{-webkit-animation-delay:8s;animation-delay:8s}.lines .line:nth-child(18){margin-left:5%}.lines .line:nth-child(18)::after{-webkit-animation-delay:8.5s;animation-delay:8.5s}.lines .line:nth-child(19){margin-left:-5%}.lines .line:nth-child(19)::after{-webkit-animation-delay:9s;animation-delay:9s}@-webkit-keyframes run{0%{top:-50%}100%{top:110%}}@keyframes run{0%{top:-50%}100%{top:110%}}.section-title-bg{color:#f0f0f0;font-size:85px;line-height:0;position:absolute;top:50%;left:0;z-index:-1;opacity:.8;font-family:Monoton,cursive;text-transform:uppercase;right:0;transform:translateY(-50%)}

 Following these two steps will create your login form.

 It is fully professional and responsive which means you can use this login form for any device. For every device, it will look professional and good-looking. 

Hopefully from this article, you have learned and understood how to create a professional login form. If you have any problems, you can let me know by commenting and I will help you as much as possible.



❤Sharing is caring❤