How To Create Animated Glowing Effect Login Form By Kainat Ijaz

How To Create Animated Glowing Effect Login Form By Kainat Ijaz. In today’s digital age, having a visually appealing and interactive login form on your website can greatly enhance the user experience. One way to achieve this is by creating an animated glowing effect login form using HTML and CSS. In this tutorial, we will walk you through the step-by-step process of creating such a form.

Step 1: Setting up the HTML Structure

The first step is to set up the HTML structure for our login form. We will use a simple form element with input fields for the username and password, along with a submit button. Here’s the code:

<form>
  <input type="text" name="username" placeholder="Username" required />
  <input type="password" name="password" placeholder="Password" required />
  <input type="submit" value="Login" />
</form>

This code creates a form with two input fields and a submit button. The ‘required’ attribute ensures that the fields cannot be left empty.

Step 2: Styling the Login Form

Now that we have the basic structure in place, let’s move on to styling the login form. We will use CSS to achieve the animated glowing effect. Here’s the code:

form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

input[type="text"],
input[type="password"] {
  padding: 10px;
  margin-bottom: 10px;
  border: none;
  border-bottom: 2px solid #ccc;
  transition: border-bottom-color 0.5s;
}

input[type="text"]:focus,
input[type="password"]:focus {
  border-bottom-color: #ff6b6b;
}

input[type="submit"] {
  background-color: #ff6b6b;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.5s;
}

input[type="submit"]:hover {
  background-color: #ff4f4f;
}

This CSS code applies the necessary styles to the form elements. The ‘transition’ property creates a smooth color transition on focus, giving the illusion of a glowing effect. The ‘hover’ pseudo-class is used to change the background color of the submit button when the user hovers over it.

Step 3: Adding Animation to the Glowing Effect

To add animation to the glowing effect, we will use CSS keyframes. Here’s the updated CSS code:

@keyframes glowing {
  0% {
    border-bottom-color: #ff6b6b;
  }
  50% {
    border-bottom-color: #ff4f4f;
  }
  100% {
    border-bottom-color: #ff6b6b;
  }
}

input[type="text"]:focus,
input[type="password"]:focus {
  animation: glowing 1s infinite;
}

This code defines the ‘glowing’ keyframe animation that changes the color of the border-bottom of the input fields. The ‘infinite’ value makes the animation loop indefinitely. When the input fields are in focus, the animation is applied.

Step 4: Testing and Final Touches

Now that we have completed the HTML and CSS coding, it’s time to test our animated glowing effect login form. Open the HTML file in a web browser and try entering some text in the input fields. You should see the glowing effect in action!

Feel free to experiment with different colors and animation durations to customize the login form to suit your website’s design. You can also add additional styling and functionality as per your requirements.

Conclusion

In this tutorial, we learned how to create an animated glowing effect login form using HTML and CSS. By adding interactivity and visual appeal to your website’s login form, you can enhance the user experience and make a lasting impression. Remember to test your form across different browsers and devices to ensure compatibility. Happy coding!

Visit Our Youtube Channel

Related :https://cssanimation.shop/awesome-animated-login-form-using-html-css-css-animation-informativeworld713-cssanimation/

<!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="login-page">
<div class="shape1"></div>
<div class="shape2"></div>
<div class="shape3"></div>
<form>
<label>User Name</label>
<input type="text" name="username" placeholder="Username/Email" required>
<label>Password</label>
<input type="password" name="Password" placeholder="Password" required>
<div class="checkvalue">
<input type="checkbox" name="" id="checkbox" required>
<label for="checkbox">I accept the agreement</label>
</div>
<input type="submit" name="Submit" id="submit">
</form>
</div>	
</div>
</body>
</html>
<style type="text/css">
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css);
/*border-radius:32% 69% 34% 53% / 51% 47% 52% 50% ;
#0bfc03
#03b1fc
#eb4034*/
body{
	background: #000;
}
.main{
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	min-height: 100vh;
}
.login-page{
	position: relative;
	max-width: 400px;
	width: 100%;
}
.login-page form{
	position: relative;
	width: 100%;
	max-width: 250px;
	margin: auto;
	margin-top:60px;
}
.login-page form label{
	font-weight: bold;
	margin: 10px 0;
}
.login-page form input[type=text], .login-page form input[type=password]{
	display: block;
	width: 100%;
	padding: 10px;
}
.checkvalue{
	margin: 15px 0;
}
#submit{
	display: block;
	width: 100%;
	padding: 10px;
	max-width: 200px;
	margin: auto;
	border: none;
	outline: none;
	background: linear-gradient(to bottom right,
		#0bfc03, #03b1fc, #eb4034);
	color: #fff;
	font-weight: bold;
}
.shape1{
	background: #fff;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 400px;
	height: 400px;
	border: 1px solid #0bfc03;
	border-radius:32% 69% 34% 53% / 51% 47% 52% 50%;
	box-shadow: 0px 0px 20px 5px #0bfc03;
	animation: rotat1 5s linear infinite;
}
.shape2{
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 400px;
	height: 400px;
	border: 1px solid #03b1fc;
	border-radius:32% 69% 34% 53% / 51% 47% 52% 50%;
	box-shadow: 0px 0px 20px 5px #03b1fc;
	animation: rotat2 5s linear infinite;
}
.shape3{
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 400px;
	height: 400px;
	border: 1px solid #eb4034;
	border-radius:32% 69% 34% 53% / 51% 47% 52% 50%;
	box-shadow: 0px 0px 20px 5px #eb4034;
	transform: rotate(45deg);
	animation: rotat3 5s linear infinite;
}
@keyframes rotat1{
	0%{
		transform: rotate(-0deg);
	}
	100%{
		transform: rotate(360deg);
	}
}
@keyframes rotat2{
	0%{
		transform: rotate(360deg);
	}
	100%{
		transform: rotate(0deg);
	}
}
@keyframes rotat3{
	0%{
		transform: rotate(360deg);
	}
	100%{
		transform: rotate(-360deg);
	}
}	
</style>
One thought on “How To Create Animated Glowing Effect Login Form By Kainat Ijaz”

Leave a Reply

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