CodeIShare

Input CSS Animation : Underline Filling Effect on Focus

Enhance your web forms with captivating CSS animations. This snippet showcases a dynamic underline filling effect on input focus. Elevate user experience effortlessly!

Input CSS Animation : Underline Filling Effect on Focus

Enhance your web forms with captivating CSS animations. This snippet showcases a dynamic underline filling effect on input focus. Elevate user experience effortlessly!

Web forms are crucial elements of interaction on websites, and adding subtle animations can greatly enhance user engagement. One such animation is the underline filling effect, which dynamically fills the underline of an input field when it’s focused.

In this example, we’ve created a simple HTML structure with input fields for “Name” and “Email”. Using CSS, we’ve styled these input fields to have a bottom border and added a pseudo-element .underline to create the underline effect. The underline dynamically fills with color when the input is focused or contains valid content.

Source Code:

<!DOCTYPE html><html lang="en">
 <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>Input Animation Effect</title>
 <style>
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: Georgia, "Times New Roman", Times, serif;
 }
 body {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     height: 100vh;
 }
 .input-data {
     height: 45px;
     width: 200px;
     position: relative;
     margin-bottom: 30px;
     background-color: white;
 }
 .input-data .underline {
     position: absolute;
     height: 2px;
     width: 100%;
     bottom: 0px;
     z-index: 3;
 }
 .input-data .underline::before {
     position: absolute;
     content: "";
     height: 100%;
     width: 100%;
     transform: scaleX(0);
     background-color: blue;
     transform-origin: center;
     transition: all 1s ease;
 }
 .input-data input:focus ~ .underline::before,
 .input-data input:valid ~ .underline::before {
     transform: scaleX(1);
 }
 .input-data input {
     position: relative;
     height: 100%;
     width: 100%;
     outline: none;
     border: none;
     font-size: 16px;
     color: brown;
     border-bottom: 2px solid gray;
     z-index: 2;
     background-color: transparent;
 }
 .input-data input:focus ~ label,
 .input-data input:valid ~ label {
     transform: translateY(-20px);
     font-size: 14px;
     color: coral;
 }
 .input-data label {
     position: absolute;
     bottom: 20px;
     left: 0;
     color: chocolate;
     transition: all 0.4s ease;
     z-index: 1;
 }
 </style>
 </head>
     <body>
         <div class="input-data">
            <input type="text" required />
            <div class="underline"></div>
            <label for="">Name:</label>
         </div>
         <div class="input-data">
            <input type="text" required />
            <div class="underline"></div>
            <label for="">Email:</label>
         </div>
     </body>
</html>
Share the Post:

Related Posts