Input Animation – CodingNepal https://www.codingnepalweb.com CodingNepal is a blog dedicated to providing valuable and informative content about web development technologies such as HTML, CSS, JavaScript, and PHP. Tue, 02 May 2023 12:18:26 +0000 en-US hourly 1 https://wordpress.org/?v=6.4.2 Input Label Animation in HTML & CSS https://www.codingnepalweb.com/css-animation-input-label/ https://www.codingnepalweb.com/css-animation-input-label/#respond Fri, 02 Dec 2022 21:11:21 +0000 https://www.codingnepalweb.com/?p=4135 Input Label Animation in HTML & CSS

When you come to fill out a form, you may have seen there is an amazing Floating Label Animation. If you are looking for a quick and easy way to create CSS Input Label Animation then this blog is written for you.

This blog will teach you how to create an Input Label Animation using HTML and CSS only. This type of animation typically appears when we click on an input field to enter some information. In my recent blog post, I have provided  10 Free Responsive Navigation Bar, which could also enhance your skills in HTML CSS as well as JavaScript.

The float label pattern floats the inline label up above the input after the user focuses on the form field or enters a value.This method is much more space-saving than the conventional heading in front of a form field.

Have a quick look at the given image of my Input Label Animation. As you can see on this Floating Label Animationin the first input field there is an input box and inside it there is a label and you can see in the second input box that the label has gone up when the input box is in focus.

If you’re wondering how this input label animation truly works, take a look at the preview provided below. I have explained all the HTML and CSS code that I have used to create this Input Label Animation.

 Input Label Animation in HTML & CSS | Video Tutorial

All of the HTML and CSS code that I used to create this Floating Label Animation is provided. Instead of duplicating the code or downloading the source code file, I strongly advise you to watch the full video explanation of this Input Label Animation. By watching the video tutorial, you can create this Input Label Animation.

As you have seen in the video tutorial of this Input Label Animation. Basically, it’s an input with a lot of CSS effects.  As you have seen when I click inside it, the label goes up left, and when we write something on the input, label stays on top, but when we clear the input box, the label come to its original position.

Now, hopefully, you can create this Input Label Animation using HTML and CSS. The source codes for all the HTML and CSS I used to develop this Input Label Animation are provided below.

You May Like This Video:

To create an Input Label Animation, follow the given steps line by line:
  1. Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
  2. Create an index.html file. The file name must be index and its extension .html
  3. Create a style.css file. The file name must be style and its extension .css
  4. Create a script.js file. The file name must be script and its extension .js

Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the an Input Label Animation by clicking on the given download button.

First, paste the following codes into your index.html file.

<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Input Label Animaton | CoderGirl</title>
  <!---Custom CSS File--->
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="input-field">
    <input type="text" required spellcheck="false"> 
    <label>Enter email</label>
  </div>
</body>
</html>

Second, paste the following codes into your style.css file.

/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #060b23;
}
.input-field{
  position: relative;
}
.input-field input{
   width: 350px;
  height: 60px;
  border-radius: 6px;
  font-size: 18px;
  padding: 0 15px;
  border: 2px solid #fff;
  background: transparent;
  color: #fff;
  outline: none;
}
.input-field label{
  position: absolute;
  top: 50%;
  left: 15px;
  transform: translateY(-50%);
  color: #fff;
  font-size: 19px;
  pointer-events: none;
  transition: 0.3s;
}
input:focus{
  border: 2px solid #18ffff;
}
input:focus ~ label,
input:valid ~ label{
  top: 0;
  left: 15px;
  font-size: 16px;
  padding: 0 2px;
  background: #060b23;
}

That’s all, now you’ve successfully created a project on an Input Label Animation. If your code doesn’t work or you’ve faced any problems, please download the source code files from the given download button. It’s free and a zip file containing the project folder with source code files will be downloaded.

 

]]> https://www.codingnepalweb.com/css-animation-input-label/feed/ 0 Email Subscription Form Animation using only HTML & CSS https://www.codingnepalweb.com/email-subscription-form-animation-html-css/ https://www.codingnepalweb.com/email-subscription-form-animation-html-css/#comments Thu, 27 Aug 2020 06:59:00 +0000 https://codingnepalweb.com/2020/08/27/email-subscription-form-animation-using-only-html-css/ Email Subscription Form Animation using only HTML & CSS

Hello readers, Today in this blog you’ll learn how to create an Email Subscription Form Animation using only HTML & CSS. Earlier I have shared a blog on how to create an Animated Login Form Design and now I’m going to create a Subscription Button or Subscription Form Animation.

A subscription form is a form placed on any page of a website or blog where the users can input in the fields with their data to receive emails on topics associated with their interests. The main purpose of the subscription form is to opting-in subscribers to your mailing list.

In this program (Email Subscription Form Animation), at first, on the webpage, there is a button labeled “Subscribe” and when you click on that button then the email field or form appears with elastic animation. This animation is fully based on pure CSS. If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program.

Video Tutorial of Email Subscription Form Animation 

 
In the video, you have seen the awesome elastic animation of the subscribe button or subscription form. and I hope you have understood the basic codes behind creating this animation or form. To create this program, I used HTML & CSS only so if you’re a beginner then you can also create this type of form animation. Mainly I have used HTML <input type=”checkbox”> and <label> tag to make a button clickable or toggle.

If you like this program (Subscribe Button 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 Button or Form in your HTML pages, websites, and projects.

You might like this:

Email Subscription Form Animation [Source Codes]

To create this program (Email Subscription Form 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>Animated Subscribe Button | CodingNepal</title>
      <link rel="stylesheet" href="style.css">
   </head>
   <body>
      <div class="wrapper">
         <input type="checkbox" id="click">
         <label class="btn-1" for="click">Subscribe</label>
         <div class="field">
            <input type="text" placeholder="Email Address">
            <label for="click" class="btn-2">Subscribe</label>
         </div>
      </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%;
  place-items: center;
  background: #664AFF;
}
::selection{
  color: #fff;
  background: #664AFF;
}
.wrapper{
  height: 60px;
  width: 400px;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  position: relative;
}
.wrapper .btn-1{
  position: absolute;
  height: 100%;
  width: 50%;
  color: #664AFF;
  background: #fff;
  line-height: 60px;
  font-size: 27px;
  font-weight: 500;
  border-radius: 5px;
  user-select: none;
  cursor: pointer;
  box-shadow: 5px 5px 30px rgba(0,0,0,.2);
  transition: 0.4s cubic-bezier(0.68,-0.55,0.265,1.55);
}
.wrapper .btn-1:active{
  transform: scale(0.9);
}
#click:checked ~ .btn-1{
  height: 40px;
  width: 100px;
  opacity: 0;
  pointer-events: none;
}
.wrapper .field{
  height: 100%;
  width: 0%;
  opacity: 0;
  pointer-events: none;
  position: relative;
  transition: 0.4s cubic-bezier(0.68,-0.55,0.265,1.55);
}
#click:checked ~ .field{
  width: 100%;
  opacity: 1;
  pointer-events: auto;
}
.wrapper .field input{
  height: 100%;
  width: 100%;
  border: 2px solid #fff;
  border-radius: 5px;
  padding: 0 130px 0 15px;
  font-size: 20px;
  outline: none;
  box-shadow: 5px 5px 30px rgba(0,0,0,.2);
}
.wrapper .field input::placeholder{
  color: #999;
  font-size: 18px;
}
.wrapper .field .btn-2{
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  font-size: 16px;
  color: #fff;
  line-height: 40px;
  background: #664AFF;
  height: 40px;
  width: 100px;
  user-select: none;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.wrapper .field .btn-2:active{
  transform: translateY(-50%) scale(0.9);
}
.wrapper #click{
  display: none;
}

That’s all, now you’ve successfully created an Email Subscription Form 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.

]]> https://www.codingnepalweb.com/email-subscription-form-animation-html-css/feed/ 4 Awesome Input Animation using HTML & CSS | Floating Label Animation https://www.codingnepalweb.com/input-animation-using-html-css/ https://www.codingnepalweb.com/input-animation-using-html-css/#comments Fri, 03 Jul 2020 08:34:00 +0000 https://codingnepalweb.com/2020/07/03/awesome-input-animation-using-html-css-floating-label-animation/ Awesome Input Animation using HTML & CSS

Hello readers, Today in this blog you’ll learn how to create an Awesome Input Animation or Floating Label Animation using only HTML & CSS. Earlier I have shared a blog on how to create Popup Login Form Design in HTML & CSS. And now I’m going to create an Input Animation.

As you have seen on many websites, when you click on the input field to enter some info there is an awesome floating label animation. A floating label is a text label that appears inside the input field at full font size. When interacted with, the label “floats” above, making space or room for the user to input value or log-in details.

Today I’ll share with you this program (Floating Label Animation or Input Animation). In this program, there is an input animation also that means when you click on the input field there is a smooth border animation that starts from the center and expands to the left and right side.

If you’re feeling difficulty understanding what I am saying. You can watch a full video tutorial on this program (Floating Label Animation or Input Animation).

Video Tutorial of Floating Label Animation or Input Animation

 
In the video, you have seen Input Animation with Floating Label Animation. I hope you like this design. If you’re a beginner and you know HTML & CSS then you can also create this type of animation and use it on your websites and projects. You can easily get the source codes of this program. To get the source codes you just need to scroll down.

You might like this:

Floating Label Animation or Input Animation [Source Codes]

To create this program (Floating Label Animation or Input 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>Input Animation | CodingNepal</title>
      <link rel="stylesheet" href="style.css">
   </head>
   <body>
      <div class="wrapper">
         <div class="input-data">
            <input type="text" required>
            <div class="underline"></div>
            <label>Name</label>
         </div>
      </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;
  outline: none;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(-135deg, #c850c0, #4158d0);
}
.wrapper{
  width: 450px;
  background: #fff;
  padding: 30px;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}
.wrapper .input-data{
  height: 40px;
  width: 100%;
  position: relative;
}
.wrapper .input-data input{
  height: 100%;
  width: 100%;
  border: none;
  font-size: 17px;
  border-bottom: 2px solid silver;
}
.input-data input:focus ~ label,
.input-data input:valid ~ label{
  transform: translateY(-20px);
  font-size: 15px;
  color: #4158d0;
}
.wrapper .input-data label{
  position: absolute;
  bottom: 10px;
  left: 0;
  color: grey;
  pointer-events: none;
  transition: all 0.3s ease;
}
.input-data .underline{
  position: absolute;
  height: 2px;
  width: 100%;
  bottom: 0;
}
.input-data .underline:before{
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  background: #4158d0;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease;
}
.input-data input:focus ~ .underline:before,
.input-data input:valid ~ .underline:before{
  transform: scaleX(1);
}

That’s all, now you’ve successfully created an Awesome Input Animation using 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.

]]> https://www.codingnepalweb.com/input-animation-using-html-css/feed/ 3