Login Form with floating placeholder and light button

Interduction

In the digital age, login forms have become an integral part of our online experiences. Whether we’re logging into social media, online shopping platforms, or financial institutions, we need to enter our login credentials to gain access to our accounts. However, a poorly designed login form can result in frustration for users, and even security risks.

One effective design solution to improve user experience and security is a login form with floating placeholders and a light-colored button. Floating placeholders, also known as floating labels, are text labels that appear inside the input field and move above it when the user types, providing a clean and modern look to the form. Light-colored buttons, on the other hand, are aesthetically pleasing and can easily draw the user’s attention to the login button, making it easy for them to proceed with the login process.

The use of floating placeholders in login forms has many benefits. First, it helps to reduce clutter on the login page by eliminating the need for separate labels, making the form look cleaner and more organized. Second, it helps to improve the user experience by providing context and guidance to the user when filling out the form. Third, it makes the form more accessible to users with disabilities, such as visual impairments, who may have difficulty reading small text labels.

In addition, light-colored buttons offer several advantages over darker buttons. A light-colored button creates a high contrast with the background, making it easier for users to see and click on the button. It also creates a sense of calmness and professionalism, which is especially important for login forms that deal with sensitive information.

In conclusion, a login form with floating placeholders and a light-colored button is a smart and modern design solution that enhances both user experience and security. By incorporating these design elements, businesses can ensure that their login forms are user-friendly, aesthetically pleasing, and secure.

HTML Code

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        
    </head>
    <body>
        <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>

        
    </body>
    </html>

HTML Output

It is the output of the above code

CSS code

Copy the below code and paste above the </head>

 <style>
  html {
  height: 100%;
}
body {
  margin:0;
  padding:0;
  font-family: sans-serif;
  background: linear-gradient(#0056f6, #552424);
}

.login-box {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  padding: 40px;
  transform: translate(-50%, -50%);
  background: rgba(0, 255, 51, 0.495);
  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: #f40303;
  font-size: 16px;
  text-decoration: none;
  text-transform: uppercase;
  overflow: hidden;
  transition: .5s;
  margin-top: 40px;
  letter-spacing: 4px;
  font-weight: bold;
}

.login-box a:hover {
  background: #f40303;
  color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 5px #f40303,
              0 0 25px #f40303,
              0 0 50px #f40303,
              0 0 100px #f40303;
}

.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, #f40303);
  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, #f40303);
  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, #f40303);
  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, #f40303);
  animation: btn-anim4 1s linear infinite;
  animation-delay: .75s
}

@keyframes btn-anim4 {
  0% {
    bottom: -100%;
  }
  50%,100% {
    bottom: 100%;
  }
}

        </style>

CSS Output

After adding Css the output is

This the Output

Live Preview

Leave a Comment

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

Scroll to Top