Facebook Instagram Youtube
  • Home
  • Blog
  • HTML & CSS
    • Login Forms
    • Website Designs
    • Navigation Bars
    • Sidebar Menu
    • Card Designs
    • More
      • CSS Buttons
      • Glowing Effects
      • Social Media Buttons
      • Preloader or Loaders
      • Neumorphism Designs
  • JavaScript
    • Form Validation
    • Image Sliders
    • API Projects
    • JavaScript Games
    • Canvas Projects
  • PHP
  • Contact us
Search
CodingNepal CodingNepal
  • Home
  • Blog
    • 10 Easy JavaScript Games for Beginners with Source Code

      10 Easy JavaScript Games for Beginners with Source Code

      10 Best JavaScript Projects with Free Source Code JavaScript Projects for Beginners

      Top 10 JavaScript Projects for Beginners with Source Code

      Top 10 Profile Card Template Designs in HTML & CSS

      Top 10 Profile Card Template Designs in HTML & CSS

      Top 10 Website Templates Design in HTML CSS & JavaScript

      10+ Website Templates Design in HTML CSS and JavaScript

      Top 5 Sidebar Menu Templates in HTML CSS & JavaScript

      Top 15 Sidebar Menu Templates in HTML CSS & JavaScript

  • HTML & CSS
    • Login Forms
    • Website Designs
    • Navigation Bars
    • Sidebar Menu
    • Card Designs
    • More
      • CSS Buttons
      • Glowing Effects
      • Social Media Buttons
      • Preloader or Loaders
      • Neumorphism Designs
  • JavaScript
    • Form Validation
    • Image Sliders
    • API Projects
    • JavaScript Games
    • Canvas Projects
  • PHP
  • Contact us
Home HTML and CSS Login Form with Floating Label Animation using only HTML & CSS

Login Form with Floating Label Animation using only HTML & CSS

By
CodingNepal
-
August 25, 2020
Login Form with Floating Label Animation using only HTML & CSS

Hello readers, Today in this blog you’ll learn how to create an Animated Login Form with Floating Label Animation using only HTML & CSS. Earlier I have shared a blog on how to create a Responsive Chat Box Design and now I’m going to create a Login Form with Floating Label Animation.

A Login Form is a collection of credentials used to validate a user. Most often, these consist of a username and password. The login form is used by websites, computer applications, and mobile apps. A floating label is a text that appears inside the input field. When the user interacted with the input, the label “floats” above and making room for the user to input a value.

In this program (Login Form with Floating Label Animation), on the webpage, there is a Login Form with two input fields – Email and Password, a forgot password link, remember me checkbox, a button, and a signup link. When you focus on the input field, the label or text of the input float above. If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program.

Video Tutorial of Login Form with Floating Label Animation

 
In the video, you’ve seen the Login Form with Floating Label Animation and I hope you’ve understood the basic codes behind creating this program. This is a pure CSS program so when you entered your info and submit the form, it won’t redirect you to any other pages/sites. If you know JavaScript, then you add some advanced features on this form like – validation of the input field, show or hide the password toggle button, and many more.

If you like this program (Login Form with Floating Label Animation) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down. You can use this Login Form in your HTML pages, websites, and projects.

You might like this:

  • Animated Login Form Design
  • Amazing Transparent Login Form
  • Responsive Contact us Form UI Design
  • Multi-step Form with Step Progress Bar

Login Form with Floating Label Animation [Source Codes]

To create this program (Login Form with Floating Label Animation). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file.

First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title>Login Form Design | CodeLab</title>
      <link rel="stylesheet" href="style.css">
   </head>
   <body>
      <div class="wrapper">
         <div class="title">
            Login Form
         </div>
         <form action="#">
            <div class="field">
               <input type="text" required>
               <label>Email Address</label>
            </div>
            <div class="field">
               <input type="password" required>
               <label>Password</label>
            </div>
            <div class="content">
               <div class="checkbox">
                  <input type="checkbox" id="remember-me">
                  <label for="remember-me">Remember me</label>
               </div>
               <div class="pass-link">
                  <a href="#">Forgot password?</a>
               </div>
            </div>
            <div class="field">
               <input type="submit" value="Login">
            </div>
            <div class="signup-link">
               Not a member? <a href="#">Signup now</a>
            </div>
         </form>
      </div>
   </body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
html,body{
  display: grid;
  height: 100%;
  width: 100%;
  place-items: center;
  background: #f2f2f2;
  /* background: linear-gradient(-135deg, #c850c0, #4158d0); */
}
::selection{
  background: #4158d0;
  color: #fff;
}
.wrapper{
  width: 380px;
  background: #fff;
  border-radius: 15px;
  box-shadow: 0px 15px 20px rgba(0,0,0,0.1);
}
.wrapper .title{
  font-size: 35px;
  font-weight: 600;
  text-align: center;
  line-height: 100px;
  color: #fff;
  user-select: none;
  border-radius: 15px 15px 0 0;
  background: linear-gradient(-135deg, #c850c0, #4158d0);
}
.wrapper form{
  padding: 10px 30px 50px 30px;
}
.wrapper form .field{
  height: 50px;
  width: 100%;
  margin-top: 20px;
  position: relative;
}
.wrapper form .field input{
  height: 100%;
  width: 100%;
  outline: none;
  font-size: 17px;
  padding-left: 20px;
  border: 1px solid lightgrey;
  border-radius: 25px;
  transition: all 0.3s ease;
}
.wrapper form .field input:focus,
form .field input:valid{
  border-color: #4158d0;
}
.wrapper form .field label{
  position: absolute;
  top: 50%;
  left: 20px;
  color: #999999;
  font-weight: 400;
  font-size: 17px;
  pointer-events: none;
  transform: translateY(-50%);
  transition: all 0.3s ease;
}
form .field input:focus ~ label,
form .field input:valid ~ label{
  top: 0%;
  font-size: 16px;
  color: #4158d0;
  background: #fff;
  transform: translateY(-50%);
}
form .content{
  display: flex;
  width: 100%;
  height: 50px;
  font-size: 16px;
  align-items: center;
  justify-content: space-around;
}
form .content .checkbox{
  display: flex;
  align-items: center;
  justify-content: center;
}
form .content input{
  width: 15px;
  height: 15px;
  background: red;
}
form .content label{
  color: #262626;
  user-select: none;
  padding-left: 5px;
}
form .content .pass-link{
  color: "";
}
form .field input[type="submit"]{
  color: #fff;
  border: none;
  padding-left: 0;
  margin-top: -10px;
  font-size: 20px;
  font-weight: 500;
  cursor: pointer;
  background: linear-gradient(-135deg, #c850c0, #4158d0);
  transition: all 0.3s ease;
}
form .field input[type="submit"]:active{
  transform: scale(0.95);
}
form .signup-link{
  color: #262626;
  margin-top: 20px;
  text-align: center;
}
form .pass-link a,
form .signup-link a{
  color: #4158d0;
  text-decoration: none;
}
form .pass-link a:hover,
form .signup-link a:hover{
  text-decoration: underline;
}

That’s all, now you’ve successfully created a Login Form with Floating Label Animation using only HTML & CSS. If your code doesn’t work or you’ve faced any error/problem then please comment down or contact us from the contact page.

  • TAGS
  • Animated Login Form
  • Floating Label Animation
  • Form Design
  • HTML Login Form
  • Login Form
Share
Facebook
WhatsApp
Twitter
Copy URL
    Previous article3D Social Media Buttons using only HTML & CSS
    Next articleEmail Subscription Form Animation using only HTML & CSS
    CodingNepal

    RELATED ARTICLESMORE FROM AUTHOR

    How to Create Responsive Fiverr Website in HTML CSS and JavaScript

    How to Create Responsive Fiverr Website in HTML and CSS

    Create A Responsive Coffee Website in HTML and CSS

    Create A Responsive Coffee Website in HTML and CSS

    Create Beautiful Responsive Cards in HTML and CSS

    How to Create Responsive Cards in HTML and CSS

    Recent Posts

    Build An AI Image Generator Website in HTML CSS and JavaScript

    Build An AI Image Generator Website in HTML CSS and JavaScript

    December 15, 2023
    How to Create Responsive Fiverr Website in HTML CSS and JavaScript

    How to Create Responsive Fiverr Website in HTML and CSS

    October 11, 2023
    Create A Responsive Coffee Website in HTML and CSS

    Create A Responsive Coffee Website in HTML and CSS

    October 1, 2023
    Create Beautiful Responsive Cards in HTML and CSS

    How to Create Responsive Cards in HTML and CSS

    September 23, 2023
    Create A Responsive Footer in HTML and CSS Only

    Create A Responsive Footer Section in HTML and CSS

    September 16, 2023

    Featured Post

    Build An Image Editor in HTML CSS & JavaScript

    Build An Image Editor in HTML CSS & JavaScript

    CodingNepal - July 15, 2022 11

    Categories

    • HTML and CSS225
    • Javascript168
    • JavaScript Projects97
    • Login Form51
    • Card Design43
    • Navigation Bar35
    • Website Designs25
    • Image Slider21
    • CSS Buttons20
    • Sidebar Menu17
    • JavaScript Games16
    • API Projects15
    • Preloader or Loader15
    • Form Validation14
    • PHP12
    CodingNepal
    ABOUT US
    CodingNepal is a blog dedicated to providing valuable and informative content about web development technologies such as HTML, CSS, JavaScript, and PHP... Read more
    FOLLOW US
    Facebook Instagram Youtube
    • About us
    • Terms & Conditions
    • Privacy policy
    • Contact us
    Copyright © 2024 CodingNepal All Rights Reserved

    AdBlock Detected

    Ad