Enhance User Experience: Input label Wave Animation using CSS

In the vast landscape of web development, crafting user-friendly and visually appealing forms is a critical aspect. One often-overlooked yet impactful element of form design is the styling of input fields. In this post, we'll explore a creative approach to enhance the user experience by incorporating animated input labels and underlines using pure CSS.

Also Read: Envelope Animation using HTML and CSS

HTML Structure

In this example, we'll create a simple email input field with a unique twist. The email label will be split into individual characters, and as the user interacts with the input, the label will transform, providing a visually engaging experience like a wavy effect.

 <div class="main-container">
    <div class="field">
        <input type="email" placeholder=" " id="email-address" required="">
        <label for="email-address">
            <span style="--i: 0">E</span>
            <span style="--i: 1">m</span>
            <span style="--i: 2">a</span>
            <span style="--i: 3">i</span>
            <span style="--i: 4">l</span>
        </label>
        <div class="underline"></div>
    </div>
</div>

In this snippet, we create a container (main-container) to hold our form field. Inside, we have a field div containing an email input, a label with individual span elements for each character, and an underline for a sleek visual effect. This is the foundation upon which we'll build our animated form.

CSS Styling

Let's dive into the CSS styling to make our input visually appealing and interactive. We'll utilize modern CSS techniques and transitions to achieve a sleek design. 

.main-container {
    display: flex;
    min-height: 100vh;
    min-width: 250px;
    justify-content: center;
    font-family: 'calibri';
    align-items: center;
}

.field {
    position: relative;
}

.field input {
    border: none;
    width: 250px;
    display: block;
    padding: 5px 0;
    font-size: 15px;
    background: transparent;
    transition: transform .3s;
    color: rgb(250, 250, 250);
    border-bottom: 1px solid rgb(90, 90, 90);
}

.field input:focus {
    outline: none;
}

.field label {
    position: absolute;
    bottom: 5px;
    cursor: text;
    display: flex;
    color: #999;
    font-size: 17px;
}

.field span {
    transition: transform 0.25s ease-in-out,font 0.25s ease-in-out;
    transition-delay: calc(var(--i) * .07s);
}

.field input:focus~label span,
.field input:not(:placeholder-shown)~label span {
    font-size: 14px;
    transform: translateY(-25px);
}

.underline {
    position: absolute;
    width: 100%;
    height: 1.5px;
    bottom: 0;
    background: rgb(163, 255, 178);
    transform: scaleX(0);
    transition: .3s;
    border-radius: 10px;
}

input:focus~.underline {
    transform: scaleX(1);
}

• Styling the Input Field: We set up the input field with appropriate sizing, styling, and transitions for a smooth user experience.
• Label Animation: The label is uniquely animated. When the input is focused or has content, the label characters move upward, creating a distinctive effect.
• Underline Animation: An animated underline adds a dynamic touch to the form, emphasizing the current state of the input.

By following this tutorial, you've learned how to enhance your forms with modern design principles and subtle animations. Remember to tailor the styles and interactions to fit the overall theme of your website or application.

Also Read: Image Folding Effect on Hover using HTML and CSS

Feel free to experiment with different colors, fonts, or animations to make this form uniquely yours. As you continue to refine your web development skills, you'll find endless possibilities for creating stunning and user-friendly interfaces.

Download