Login Form with floating placeholder | Animated Login Form - Codewithrandom

Login Form with floating placeholder | Animated Login Form - Codewithrandom

Login Form with floating placeholder | Animated Login Form - Codewithrandom


Welcome🎉 to Code With Random blog. In this blog, we learn how to create a Login Form. We use HTML & CSS  for Login Form. Hope you enjoy our blog so let's start with a basic HTML structure for the Login Form. 

HTML code

 <div class="login-box">  
  <h2>Login</h2>  
  <form>  
   <div class="user-box">  
    <input type="text" name="" required="">  
    <label>Username</label>  
   </div>  
   <div class="user-box">  
    <input type="password" name="" required="">  
    <label>Password</label>  
   </div>  
   <a href="#">  
    <span></span>  
    <span></span>  
    <span></span>  
    <span></span>  
    Submit  
   </a>  
  </form>  
 </div>  
There is all HTML code for the Login Form. Now, you can see output without CSS, then we write CSS for the Login Form.
Output
Login Form with floating placeholder | Animated Login Form - Codewithrandom

CSS code

 html {  
  height: 100%;  
 }  
 body {  
  margin:0;  
  padding:0;  
  font-family: sans-serif;  
  background: linear-gradient(#141e30, #243b55);  
 }  
 .login-box {  
  position: absolute;  
  top: 50%;  
  left: 50%;  
  width: 400px;  
  padding: 40px;  
  transform: translate(-50%, -50%);  
  background: rgba(0,0,0,.5);  
  box-sizing: border-box;  
  box-shadow: 0 15px 25px rgba(0,0,0,.6);  
  border-radius: 10px;  
 }  
 .login-box h2 {  
  margin: 0 0 30px;  
  padding: 0;  
  color: #fff;  
  text-align: center;  
 }  
 .login-box .user-box {  
  position: relative;  
 }  
 .login-box .user-box input {  
  width: 100%;  
  padding: 10px 0;  
  font-size: 16px;  
  color: #fff;  
  margin-bottom: 30px;  
  border: none;  
  border-bottom: 1px solid #fff;  
  outline: none;  
  background: transparent;  
 }  
 .login-box .user-box label {  
  position: absolute;  
  top:0;  
  left: 0;  
  padding: 10px 0;  
  font-size: 16px;  
  color: #fff;  
  pointer-events: none;  
  transition: .5s;  
 }  
 .login-box .user-box input:focus ~ label,  
 .login-box .user-box input:valid ~ label {  
  top: -20px;  
  left: 0;  
  color: #03e9f4;  
  font-size: 12px;  
 }  
 .login-box form a {  
  position: relative;  
  display: inline-block;  
  padding: 10px 20px;  
  color: #03e9f4;  
  font-size: 16px;  
  text-decoration: none;  
  text-transform: uppercase;  
  overflow: hidden;  
  transition: .5s;  
  margin-top: 40px;  
  letter-spacing: 4px  
 }  
 .login-box a:hover {  
  background: #03e9f4;  
  color: #fff;  
  border-radius: 5px;  
  box-shadow: 0 0 5px #03e9f4,  
        0 0 25px #03e9f4,  
        0 0 50px #03e9f4,  
        0 0 100px #03e9f4;  
 }  
 .login-box a span {  
  position: absolute;  
  display: block;  
 }  
 .login-box a span:nth-child(1) {  
  top: 0;  
  left: -100%;  
  width: 100%;  
  height: 2px;  
  background: linear-gradient(90deg, transparent, #03e9f4);  
  animation: btn-anim1 1s linear infinite;  
 }  
 @keyframes btn-anim1 {  
  0% {  
   left: -100%;  
  }  
  50%,100% {  
   left: 100%;  
  }  
 }  
 .login-box a span:nth-child(2) {  
  top: -100%;  
  right: 0;  
  width: 2px;  
  height: 100%;  
  background: linear-gradient(180deg, transparent, #03e9f4);  
  animation: btn-anim2 1s linear infinite;  
  animation-delay: .25s  
 }  
 @keyframes btn-anim2 {  
  0% {  
   top: -100%;  
  }  
  50%,100% {  
   top: 100%;  
  }  
 }  
 .login-box a span:nth-child(3) {  
  bottom: 0;  
  right: -100%;  
  width: 100%;  
  height: 2px;  
  background: linear-gradient(270deg, transparent, #03e9f4);  
  animation: btn-anim3 1s linear infinite;  
  animation-delay: .5s  
 }  
 @keyframes btn-anim3 {  
  0% {  
   right: -100%;  
  }  
  50%,100% {  
   right: 100%;  
  }  
 }  
 .login-box a span:nth-child(4) {  
  bottom: -100%;  
  left: 0;  
  width: 2px;  
  height: 100%;  
  background: linear-gradient(360deg, transparent, #03e9f4);  
  animation: btn-anim4 1s linear infinite;  
  animation-delay: .75s  
 }  
 @keyframes btn-anim4 {  
  0% {  
   bottom: -100%;  
  }  
  50%,100% {  
   bottom: 100%;  
  }  
 }  

Now we have completed our CSS section,  Here is our final updated output CSS.

Final Output
Login Form with floating placeholder | Animated Login Form - Codewithrandom


Login Form with floating placeholder | Animated Login Form - Codewithrandom

Now we have completed our CSS section,  Here is our updated output with CSSHope you like the Login Form, you can see output project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕

In this post, we learn how to create a Login Form using simple HTML & CSS. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by - Code With Random/Anki 

Check out more.....

2 Comments

  1. The sumit tag is not clickable and css not working after form tag. [ .login-box form a{
    ....
    } ]

    ReplyDelete
  2. same me not working css or style.css ?

    ReplyDelete

Post a Comment

Previous Post Next Post