Pure CSS Form Input Label Animation

Nowadays we see an amazing floating label animation while filling up contact forms, login forms, signup forms, registration forms, etc. on many websites. If you're also trying to find a quick and easy way to create a CSS form input label animation like this, then today's snippet is for you. Today in this blog post we will learn how we can create input label animation using only HTML and CSS. The following video tutorial shows the process of making this CSS animation example snippet.

Video Tutorial:

We hope you have watched the form input label animation video tutorial above. We see this type of animation only when we click on the input field of a form UI to enter some data. In this method, when the user focuses on the form field or enters a value, the form's label rises above the input field. Again when we clear the input box, the label returns to its original position. When compared to the traditional heading in front of a form field, this strategy saves a lot more space.

In today's CSS Label Animation snippet, we have a container div called 'wrapper' with a form element inside it. The form element has four 'content' divs, each containing an input field and a related label. Besides, a submit button has also been taken.

In CSS, the container div is positioned at the center of the viewport after giving a specific height and width. The 'content' div is given a relative position and the input field's label is given an absolute position. This allows the label to be positioned with the 'content' div and animated. Then we set the focus and valid state to the top value '-20px' so that when something is written in the input field the label goes top by 20px. A transition value is also given to make the floating label animation smoother. You can better understand this CSS form input label animation snippet by watching the video tutorial above before collecting the source code.

You May Also Like:

CSS Form Input Label Animation [ Source Code ]:

To create this Input Label Animation in HTML & CSS snippet, HTML and CSS must be created. Then copy the code from the code box below and paste it into your file. After saving the code and opening it in the browser, if you have any problem, download the code from the download button below.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
  <!-- divinectorweb.com -->
<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>Form Design with Input label animation</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper">
        <form>
            <div class="content">
              <input type="text" name="" required="">
              <label>Your Full Name</label>
            </div>
            <div class="content">
              <input type="email" name="" required="">
              <label>Your Email Address</label>
            </div>
            <div class="content">
              <input type="text" name="" required="">
              <label>Your Username</label>
            </div>
            <div class="content">
              <input type="password" name="" required="">
              <label>Your Password</label>
            </div>
            <a href="#" id="btn">Submit</a>
        </form>    
    </div>
</body>
</html>

ADD CSS:

html {
	height: 100%;
}
body {
	margin: 0;
	padding: 0;
	font-family: sans-serif;
	background: #0fc5e1;
}
.wrapper {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 350px;
	padding: 40px;
	transform: translate(-50%, -50%);
	background: #e8fbff;
	box-sizing: border-box;
	box-shadow: 0 15px 25px rgba(0, 0, 0, .6);
	border-radius: 10px;
	height: 450px;
}
.content {
	position: relative;
}
.content input {
	width: 100%;
	padding: 10px 0;
	font-size: 16px;
	color: #262626;
	margin-bottom: 30px;
	border: none;
	border-bottom: 2px solid #262626;
	outline: none;
	background: transparent;
}
.content label {
	position: absolute;
	top: 0;
	left: 0;
	padding: 10px 0;
	font-size: 16px;
	color: #262626;
	pointer-events: none;
	transition: .5s;
}
.content input:focus~label,
.content input:valid~label {
	top: -20px;
	left: 0;
	color: #101010;
	font-size: 12px;
	font-weight: 700;
}
#btn {
	background: linear-gradient(45deg, #0191aa, #0fc6e0);
	text-decoration: none;
	color: #fff;
	padding: 15px 0;
	display: block;
	text-align: center;
	margin-top: 8%;
	font-size: 25px;
	letter-spacing: 3px;
}

That's it, we hope you have successfully created a project on this CSS form input label animation. Explore our website to get more project code. Thanks for visiting our website.

DOWNLOAD CODE

Video Tutorial:

CSS Form Input Label Animation [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Pure CSS Form Input Label Animation

Video Tutorial:

CSS Form Input Label Animation [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form