How to Create Login Form Background Glowing By Kainat Ijaz

How to Create Login Form Background Glowing By Kainat Ijaz. In today’s digital age, having an eye-catching and interactive login form can make a significant difference in user experience. One way to achieve this is by creating an animated login form using HTML and CSS, with a background glowing effect. This tutorial will walk you through the steps to create such a form.

Step 1: Setting Up the HTML Structure

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

<form id='login-form'>
  <input type='text' id='username' placeholder='Username'>
  <input type='password' id='password' placeholder='Password'>
  <button type='submit'>Login</button>
</form>

Make sure to include appropriate IDs and placeholder text for each element.

Step 2: Styling the Form with CSS

Once the HTML structure is in place, we can move on to styling the form using CSS. We will create a glowing effect for the background by utilizing CSS animations and transitions.

First, let’s define the base styles for the form:

#login-form {
  width: 300px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f2f2f2;
  border-radius: 10px;
}

#login-form input, #login-form button {
  display: block;
  width: 100%;
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 5px;
  border: none;
}

#login-form button {
  background-color: #4CAF50;
  color: white;
}

These styles will give the form a clean and modern look. Now, let’s add the glowing effect to the background:

@keyframes glowing {
  0% {
    background-color: #f2f2f2;
    box-shadow: 0 0 5px #4CAF50;
  }
  50% {
    background-color: #4CAF50;
    box-shadow: 0 0 20px #4CAF50, 0 0 20px #4CAF50;
  }
  100% {
    background-color: #f2f2f2;
    box-shadow: 0 0 5px #4CAF50;
  }
}

#login-form {
  animation: glowing 3s infinite;
}

The animation keyframes define the glowing effect by changing the background color and box shadow properties over time. The animation is set to repeat indefinitely using the ‘infinite’ keyword.

Step 3: Adding JavaScript Functionality

Lastly, we can add some JavaScript functionality to enhance the user experience. For example, we can display a success message when the form is submitted. Here’s an example:

document.getElementById('login-form').addEventListener('submit', function(event) {
  event.preventDefault();
  alert('Login successful!');
});

This code snippet adds an event listener to the form’s submit event, preventing it from being submitted and showing an alert with a success message instead.

Conclusion

By following these steps, you can create an animated login form using HTML and CSS with a background glowing effect. This form not only improves the visual appeal of your website but also provides a more engaging and interactive user experience. Feel free to customize the styles and add more functionality to suit your specific needs.

Visit Our Youtube Channel

<!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="css/style.css">
<title></title>
</head>
<body>
<div class="main">
    <div class="login">
    <div class="heading"><h4>Login Form</h4></div>
    <form>
        <div class="inputbox">
            <label>User name</label>
            <input type="text" name="username" required="" placeholder="Enter Username" class="textarea">
            <span id="username"></span>
        </div>
        <!-- input box end -->
        <div class="inputbox">
             <label>Password</label>
            <input type="password" name="password" required="" placeholder="Enter Password" class="textarea">
            <span id="password"></span>
        </div>
        <!-- input box end -->
            <div class="inputbox">
                <ul>
                    <li><input type="checkbox" name="checkbox" required="" > Remember Me!</li>
                    <li><a href="">Forget Password ?</a></li>
                </ul>
        </div>
        <!-- input box end -->
        <div class="inputbox">
               <input type="submit" name="login" value="Login" id="submit">
        </div>
        <!-- input box end -->
    </form>
            <div class="inputbox signup">
              <a href="">Sign Up</a>
        </div>
        <!-- input box end -->
    </div>
</div>
</body>
</html>
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css);
@import url('https://fonts.googleapis.com/css2?family=Alkatra&display=swap');
body{
    background: #000;
}
.main{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    position: relative;
}
.login .heading h4{
    color: #e02500
}
.login{
    width: 300px;
    height: 350px;
    padding: 30px;
     background: linear-gradient( 0deg, #000, #272727);
     position: relative;
}
.login:before, .login:after{
    position: absolute;
    content: "";
    left: -2px;
    top: -2px;
    background: linear-gradient(45deg, #fb0094, #0000ff, #ffff00, #fb0094, #0000ff, #00ff00, #ffff00, #ff0000);
    background-size: 400%;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    z-index: -1;
    animation: animation 20s linear infinite;
}
@keyframes animation {
    0%
     { 
        background-position: 0 0;
     }
      50%
     { 
        background-position: 400% 0;
     }
      100%
     { 
        background-position: 0 0;
     }
}
.login:after{
    filter: blur(50px);
}
.inputbox {
    text-align: left;
}
.inputbox label{
    font-weight: bold;
    font-size: 19px;
    letter-spacing: 2px; 
    color: #fff;
    margin-top: 10px;
    margin-bottom: 2px;
}
.inputbox .textarea{
    width: 100%;
    display: block;
    border:1px solid #777;
    border-radius: 5px;
    outline: none;
    padding: 7px 5px;
    padding-left: 30px;
    position: relative;
    transition: .3s
}
.inputbox span{
    position: relative;
    transition: .3s
}
.inputbox span:before{
position: absolute;
top: -32px;
left: 10px
}
#username:before{
    font-family: fontawesome;
    content: "\f007";
}
#password:before{
    font-family: fontawesome;
    content: "\f023";
}
.inputbox input:focus ~ span,
.inputbox input:focus::-webkit-input-placeholder,
.inputbox input:focus,
.inputbox input:valid ~ span,
.inputbox input:valid::-webkit-input-placeholder,
.inputbox input:valid
{
    color: #e02500
}
.inputbox input:focus,
.inputbox input:valid{
    border: 1px solid  #e02500
}
.inputbox ul{
     padding: 0px;
     margin: 0;
     margin-top: 5px;
}
.inputbox ul li{
    display: inline-block;
    font-size: 13px;
}
.inputbox ul li:nth-child(1){
color: #fff;
}
.inputbox ul li:nth-child(2){
    float: right;
    margin-top: 5px;
}
#submit{
    display: block;
    text-align: center;
    padding: 7px 20px;
    border-radius: 5px;
    max-width: 150px;
    width: 100%;
    margin: 10px auto;
    border:none;
    outline: none;
    background: #e02500;
    color: #fff
}
.signup a{
    display: block;
    text-align: center;
    color: #fff;
    font-weight: bold;
    margin-top: 10px
}
One thought on “How to Create Login Form Background Glowing By Kainat Ijaz”

Leave a Reply

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