Level up your web forms with eye-catching input field border animation, no JavaScript needed! only with HTML & CSS. Learn how with this step-by-step guide, including a demo, video, steps and code.
In this blog post, we'll explore the art of animating input field border using just HTML and CSS. It's a simple yet powerful technique that adds a layer of interactivity to your forms input fields and increase visual appearance.
What's this Input Field Border Animation looks like:
When the user focuses on the input field, the input border (with linear gradient color) slides from left to right with animation. See below video for demo.
Here comes a fun part! We won't directly animate the border of the input field, we'll make a design that looks like the border of input field is moving and animated, without or minimum modifying the border of the input field itself. For further understanding, you'll find a demo, video tutorial, steps and commented source code below.
You’ll learn in this blog post:
- How to make an animated input field.
- How to add animation on the border of input fields.
Video Tutorial on Animated Input Field.
Animated Input Fields.
File structure:
- Create one folder.
- Open it in your code editor.
- Create two files in that folder with name and extension index.html and index.css.
Steps to create CSS animated input fields.
- Construct a container box with class named "container" (<div>) to house our elements.
- Within this container, we'll add the input_box element (<div>).
- Within this input_box, we'll add the input field and a slider (<div class="slider">) element.
- Using CSS, we'll position the slider behind the input field, effectively acting as a border.
- To reveal the slider and create the border-like appearance, we'll apply a slight margin to the input field from all sides.
- Initially, we'll use CSS to position the slider off-screen to the left (-100%).
- When the user focuses on the input field, we'll smoothly slide the slider into view (left 0%) using CSS.
- To ensure a smooth and visually appealing animation, we'll incorporate the CSS transition property.
So above are the basic steps. see below commented code for better understanding.
HTML
<!DOCTYPE html>
<html lang="en">
<!-- maketechstuff.com -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated input field | maketechstuff.com</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<div class="input_box">
<input type="text" placeholder="Username" required>
<!-- For custom input field border. -->
<span class="slider"></span>
</div>
</div>
</body>
</html>
CSS
* {
padding: 0px;
margin: 0px;
}
body {
width: 100%;
height: 100vh;
background: linear-gradient(45deg, blue, red);
}
.container{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
width: 450px;
background-color: #fff;
padding: 20px;
border-radius: 5px;
}
.input_box{
width: 100%;
display: inline-flex;
border-radius: 500px;
position: relative;
overflow: hidden;
}
input{
width: 100%;
font-size: 30px;
background-color: #f2f2f2;
border-radius: 500px;
border: none;
outline: none;
padding: 10px 20px;
/* This margin is for border width for input field. */
margin: 5px;
z-index: 2;
transition: 0.5s;
transition-delay: 0.5s;
}
/* Custom border for input field */
.slider{
position: absolute;
top: 0%;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(45deg , blue , red);
z-index: 1;
transition: 1s;
}
/* Showing custom border when user focus on input field and input field have valid text according to its type. */
input:focus + .slider,
input:valid + .slider{
left: 0%;
}
/* Changing the input field color on focus and input field have valid value according to its type. */
input:focus,
input:valid{
background-color: #fff;
transition-delay: unset;
}
Output:
So that's how you can create animated input fields using HTML and CSS. If you have any query or suggestion, feel free to ask in the comment section.
Thanks for reading.
You may like:
- How to create a input field animation on focus using HTML CSS and JavaScript.
- How to create search bar with dynamic placeholder using HTML CSS and JavaScript.
- How to float the placeholder on focus using HTML and CSS.
- How to disable input field with JavaScript.
- Make input field to replace multiplace spaces between words to single space live (on input) using JavaScript.
Share your thoughts.