1.form {
2 --width-of-input: 200px;
3 --border-height: 1px;
4 --border-before-color: rgba(221, 221, 221, 0.39);
5 --border-after-color: #5891ff;
6 --input-hovered-color: #4985e01f;
7 position: relative;
8 width: var(--width-of-input);
9}
10/* styling of Input */
11.input {
12 color: #fff;
13 font-size: 0.9rem;
14 background-color: transparent;
15 width: 100%;
16 box-sizing: border-box;
17 padding-inline: 0.5em;
18 padding-block: 0.7em;
19 border: none;
20 border-bottom: var(--border-height) solid var(--border-before-color);
21}
22/* styling of animated border */
23.input-border {
24 position: absolute;
25 background: var(--border-after-color);
26 width: 0%;
27 height: 2px;
28 bottom: 0;
29 left: 0;
30 transition: 0.3s;
31}
32/* Hover on Input */
33input:hover {
34 background: var(--input-hovered-color);
35}
36
37input:focus {
38 outline: none;
39}
40/* here is code of animated border */
41input:focus ~ .input-border {
42 width: 100%;
43}
44/* === if you want to do animated border on typing === */
45/* remove input:focus code and uncomment below code */
46/* input:valid ~ .input-border{
47  width: 100%;
48} */