Input by omriluz

1.input {
2  color: #fff;
3  font-size: 0.9rem;
4  background-color: transparent;
5  width: 100%;
6  box-sizing: border-box;
7  padding-inline: 0.5em;
8  padding-block: 0.7em;
9  border: none;
10  border-bottom: var(--border-height) solid var(--border-before-color);
11  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
12}
13
14.input-border {
15  position: absolute;
16  background: var(--border-after-color);
17  height: 2px;
18  width: 100%;
19  bottom: 0;
20  left: 0;
21  transform: scaleX(0%);
22  transition: transform 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045);
23}
24
25.input:focus {
26  outline: none;
27}
28
29.input:focus + .input-border {
30  transform: scaleX(100%);
31}
32
33.form-control {
34  position: relative;
35  --width-of-input: 300px;
36}
37
38.input-alt {
39  font-size: 1.2rem;
40  padding-inline: 1em;
41  padding-block: 0.8em;
42  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
43}
44
45.input-border-alt {
46  height: 3px;
47  background: linear-gradient(90deg, #ff6464 0%, #ffbf59 50%, #47c9ff 100%);
48  transition: transform 0.4s cubic-bezier(0.42, 0, 0.58, 1);
49}
50
51.input-alt:focus + .input-border-alt {
52  transform: scaleX(100%);
53}
54