Create an Animated Input Field with Floating Label Using CSS

Adding a simple animation makes the experience more engaging and intuitive. Users instantly understand where they are typing, and the movement of the label gives a sense of smooth flow. This tutorial shows you how to create an elegant animated input field with a floating label and an expanding underline using only CSS.

You will not need any JavaScript, no frameworks, and no complicated markup. Just HTML and CSS that work together beautifully.

The Idea

The effect you will build works like this: when the user clicks or taps the input, the label moves up and becomes smaller, leaving space for the text. At the same time, a line appears underneath the input and expands smoothly.

This technique helps improve the clarity of forms. Users can always see the field label even after they start typing, which makes your form both accessible and aesthetic. It is a perfect solution for clean, modern UI designs often used in login pages, registration forms, and contact sections.

The HTML Structure

The setup is simple. You only need a container that holds the input, an underline element, and a label.

<div class="input-data">
  <input type="text" required>
  <div class="underline"></div>
  <label>Username</label>
</div>

Each part has its role:

• The <input> is where the user types.
• The <div class="underline"> is used for the animated line that expands on focus.
• The <label> is the floating text that moves above the field when the input is active.

This structure keeps your HTML semantic and flexible for any project.

The CSS Setup

Now let’s bring it to life with CSS. We will set up positioning, transitions, and transformations that react to focus and input events.

.input-data {
  height: 40px;
  width: 200px;
  position: relative;
  font-family: Arial, sans-serif;
}

.input-data input {
  height: 100%;
  width: 100%;
  border: none;
  border-bottom: 2px solid #ccc;
  font-size: 17px;
  color: #222;
  outline: none;
  background: transparent;
}

.input-data label {
  position: absolute;
  bottom: 10px;
  left: 0;
  color: #666;
  pointer-events: none;
  transition: all 0.3s ease;
}

.input-data input:focus ~ label,
.input-data input:valid ~ label {
  transform: translateY(-20px);
  font-size: 15px;
  color: #4158d0;
}

.input-data .underline {
  position: absolute;
  height: 2px;
  width: 100%;
  bottom: 0;
  overflow: hidden;
}

.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);
}

This is all the CSS you need to get a clean, professional animation.

How It Works

Let’s break it down step by step.

1. The .input-data wrapper positions everything relative to each other.
2. The input itself has a transparent background and only a bottom border. This gives it a minimalistic look.
3. The label starts positioned at the bottom of the input. When the user clicks or types, the label moves upward and shrinks slightly.
4. The underline is a pseudo-element (::before) that scales from 0 to 1 using transform: scaleX(). This creates a nice sliding animation from the center.

When combined, these small animations create a polished and responsive input field.

Why This Matters

Well-designed inputs improve usability and perceived quality. Even though it seems like a small detail, users subconsciously notice these things. Clean animations communicate that your website is modern, reliable, and user-focused.

In UX design, feedback is crucial. This type of animation provides immediate visual feedback. When the user focuses on the field, they know instantly that they can type. When they type and the label moves, it feels interactive and intuitive.

It is also completely accessible, as the label remains visible and tied to the input, which is better for screen readers than placeholders alone.

Customization Ideas

You can easily adapt this input style for different forms and color themes. Here are a few customization ideas:

• Change colors – Try gradients or brand-specific shades for the underline.
• Add blur or glow – Use box-shadow or text effects to highlight the focus state.
• Use different fonts – Experiment with modern or serif fonts for a unique style.
• Adjust timing – Slower transitions give a softer, more elegant feel. Faster ones feel more snappy and techy.
• Add icons – Include small icons inside the input using absolute positioning for a modern look.

You can also expand this approach for other input types like passwords, emails, or even search bars. The same animation logic applies to any of them.

Accessibility and Browser Support

This animation is fully supported in all modern browsers, including Chrome, Edge, Safari, and Firefox.
It does not rely on experimental features or browser-specific properties.

The technique also supports the :valid state, which means it can visually indicate when the user has entered valid input. This can be useful in forms with validation, where the label position stays fixed after typing.

Performance Benefits

Since everything runs purely on CSS, there is no JavaScript overhead or layout reflow issues. The browser handles these transitions efficiently using the compositor layer. This means smooth performance even on mobile devices.

It is also lightweight. The code adds almost no extra load time compared to JavaScript-based animations. You get better performance and cleaner markup.

Wrap-up

With only HTML and CSS, you can create beautiful and professional-looking input animations. The floating label and underline effect improve user experience, enhance visual clarity, and make your forms look modern and responsive.

This technique is easy to implement, easy to maintain, and works across all modern browsers. Whether you are designing a login page, a contact form, or a registration section, this small detail will make your interface feel polished and user-friendly.

Next time you design a form, try adding a bit of animation to your input fields. Small touches like these make a big difference in how users feel about your website.