How to Create Login Form Border Animation By Kainat Ijaz

How to Create Login Form Border Animation By Kainat Ijaz. In this tutorial, we will learn how to create an animated login form using HTML and CSS border animation. The login form is an essential part of any website that requires user authentication. Adding animation to the login form not only makes it visually appealing but also enhances the user experience.

To get started, let’s create a new HTML file and name it index.html. Open the file in your favorite text editor and add the following code:

<!DOCTYPE html>
<html>
<head>
  <title>Animated Login Form</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h2>Login Form</h2>
    <form>
      <div class="form-group">
        <label for="username">Username:</label>
        <input type="text" id="username">
      </div>
      <div class="form-group">
        <label for="password">Password:</label>
        <input type="password" id="password">
      </div>
      <button type="submit">Login</button>
    </form>
  </div>
</body>
</html>

In the above code, we have created a basic HTML structure for the login form. We have a container div that holds the login form. Inside the form, we have two form-group divs for the username and password fields. We also have a submit button.

Now, let’s add some CSS to style our login form. Create a new file called style.css and add the following code:

.container {
  width: 300px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f2f2f2;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

h2 {
  text-align: center;
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
}

input[type="text"],
input[type="password"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

button[type="submit"] {
  width: 100%;
  padding: 10px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button[type="submit"]:hover {
  background-color: #45a049;
}

In the above code, we have added some basic styling to our login form. We have set the width and margin of the container div to center-align it on the page. We have also added some padding and background color to the container div and applied a border, border-radius, and box-shadow to give it a nice look.

Now that we have created our basic login form, let’s add some animation to it using CSS border animation. Add the following code to your style.css file:

.form-group input[type="text"],
.form-group input[type="password"] {
  border: 1px solid transparent;
  border-bottom: 2px solid #ccc;
  transition: border-bottom-color 0.5s;
}

.form-group input[type="text"]:focus,
.form-group input[type="password"]:focus {
  border-bottom-color: #4CAF50;
}

In the above code, we have added a border-bottom to the input fields and set the border color to transparent. We have also added a transition property to smoothly animate the border-bottom color when the input fields are focused. When an input field is focused, the border-bottom color is changed to #4CAF50, which gives a nice animated effect.

That’s it! We have successfully created an animated login form using HTML and CSS border animation. You can further customize the login form by adding more styling and effects. Experiment with different colors and animation properties to create your own unique login form.

Related:https://cssanimation.shop/awesome-buttons-hover-glowing-effects-using-only-html-css-informativeworld713/

Watch Our More Videos On YouTube

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<title></title>
</head>
<body>
<div class="main">
<div class="shape1"></div>
<div class="shape2"></div>
<div class="shape3"></div>
<div class="login">
<div class="login-form">
<form>
<h1>Login Form</h1>
<div class="login-body">
<div class="inputbox">
<input type="text" name="username" required="" id="username">
<span>Username</span>
<i></i>
</div>
<!-- inputbox end -->
<div class="inputbox">
<input type="password" name="password" required="" id="password">
<span>Password</span>
<i></i>
</div>
<!-- inputbox end -->
<div class="inputbox">
<a href="">Forget Password ?</a>
</div>
<!-- inputbox end -->
<div class="inputbox">
<input type="submit" name="login" value="Login" id="login">
</div>
<!-- inputbox end -->
</div>
<div class="login-with">
	<h1>Login With</h1>
	<span class="fb"></span>
	<span class="gmail"></span>
	<span class="twitter"></span>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css);
.main{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    background: linear-gradient(90deg, #fad961 0%, #f76b1c 100%);
}
.shape1{
    position: absolute;
    height: 300px;
    width: 300px;
    top: 100px;
    left: -150px;
    background: linear-gradient( to right, #ede574, #e1f5c4);
    transform: rotate(224deg);
}
.shape2{
    position: absolute;
    height:600px;
    width: 100px;
    bottom: 100px;
    right: -50px;
    background: linear-gradient( to right, #f99738, #f99738);
    transform: rotate(224deg);
    border-radius: 100px;
}
.shape3{
    position: absolute;
    height:200px;
    width: 200px;
    top: 20px;
    right: 350px;
    background: linear-gradient( to right, #f99738, #f99738);
    transform: rotate(224deg);
    border-radius: 100px;
}
.login{
    background: #fff;
    width: 300px;
    margin: auto;
    min-height: 400px;
    overflow: hidden;
    border-radius: 10px;
    position: relative;
}
.login input{
    width: 100%;
    background: transparent;
    border: none;
    outline:none; 
    position:relative;
    z-index: 1;
    padding: 0 10px;
    margin: 20px 0;
    border-radius: 5px;
}
.login .inputbox{
    position: relative;
}
.login .inputbox span{
    position: absolute;
    left: 0;
    padding: 20px 0 10px;
    pointer-events: none;
    color: #fff;
    letter-spacing: 3px;
    transition: .5s;
    top: -10px;
    z-index: 99;
    font-weight: bold;
}
.login .inputbox input:valid ~ span,
.login .inputbox input:focus ~ span{
    color: #fff;
    font-size: .75em;
    transform: translateY(-14px);
}
.login .inputbox i{
    position: absolute;
    border-radius: 5px;
    height: 2px;
    background: #fff;
    transition: .3s;
    bottom: 20px;
    left: 0px;
    width: 100%;
}
.login .inputbox input:valid ~ i,
.login .inputbox input:focus ~ i{
    height: 30px
}
.login .login-form form{
    position: absolute;
    inset:4px;
    background: linear-gradient( to right,  #0083b0, #00b4db);
    border-radius: 10px;
    padding: 30px 20px;
    z-index: 2

}
.login .login-form:before{
    content: "";
    position: absolute;
    left: -200px;
    right: -200px;
    bottom: -200px;
    top: -200px;
    transform-origin: center center;
    background:
     conic-gradient(
        red 0deg, red 90deg,
        yellow 90deg, yellow 180deg,
        black 180deg, black 270deg,
        blue 270deg, blue 360deg );
     z-index: 1;
     animation: animation 3s linear infinite;
}
@keyframes animation{
    0%{
        transform: rotate(0deg);
    }
        100%{
        transform: rotate(360deg);
    }
}
.login-form form > h1{
text-align: center;
text-transform: uppercase;
font-weight: bold;
color: #fff;
font-size: 22px;
margin-bottom: 20px
}

.inputbox a{
    display: block;
    color: #fff;
    font-weight: bold;
    text-align: right;
    font-size: 12px
}
#login{
    background: linear-gradient(90deg, #fc466b 0%, #3f5efb 100%);
    font-weight: bold;
    text-transform: uppercase;
    margin-top: 20px;
    text-align: center;
    padding: 10px;
    color: #fff;
}
#login:hover{
      background: linear-gradient(90deg, #3f5efb 0%, #fc466b 100%);
}
.login-with{
    text-align: center;
}
.login-with h1{
    font-size: 16px;
    color: #fff;
}
.login-with span{
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    background: #fff;
    border-radius: 100px;
    border:1px solid rgba(0,0,0,0.2);
    transition: .3s;
    cursor: pointer;
    overflow: hidden;
}
.login-with span:hover{
    transform: scale(1.1);
}
.login-with .fb{
    background: #3b5998;
    color: #fff
}
.login-with .fb:before{
    font-family: fontawesome;
    content: "\f09a";
    font-size: 19px;
}
.login-with .gmail{
background: #e34133;
    color: #fff
}
.login-with .gmail:before{
    font-family: fontawesome;
    content: "\f1a0";
    font-size: 19px;
}
.login-with .twitter{
    background: #00acee;
    color: #fff
}
.login-with .twitter:before{
    font-family: fontawesome;
    content: "\f099";
    font-size: 19px;
}
2 thoughts on “How to Awesome Create Login Form Border Animation By Kainat Ijaz”

Leave a Reply

Your email address will not be published. Required fields are marked *