Input by Vraj747

1.wave-group {
2  position: relative;
3}
4
5.wave-group .input {
6  font-size: 16px;
7  padding: 10px 10px 10px 5px;
8  display: block;
9  width: 200px;
10  border: none;
11  border-bottom: 1px solid #515151;
12  background: transparent;
13}
14
15.wave-group .input:focus {
16  outline: none;
17}
18
19.wave-group .label {
20  color: #999;
21  font-size: 18px;
22  font-weight: normal;
23  position: absolute;
24  pointer-events: none;
25  left: 5px;
26  top: 10px;
27  display: flex;
28}
29
30.wave-group .label-char {
31  transition: 0.2s ease all;
32  transition-delay: calc(var(--index) * 0.05s);
33}
34
35.wave-group .input:focus ~ label .label-char,
36.wave-group .input:valid ~ label .label-char {
37  transform: translateY(-20px);
38  font-size: 14px;
39  color: #5264ae;
40}
41
42.wave-group .bar {
43  position: relative;
44  display: block;
45  width: 200px;
46}
47
48.wave-group .bar:before,
49.wave-group .bar:after {
50  content: "";
51  height: 2px;
52  width: 0;
53  bottom: 1px;
54  position: absolute;
55  background: #5264ae;
56  transition: 0.2s ease all;
57  -moz-transition: 0.2s ease all;
58  -webkit-transition: 0.2s ease all;
59}
60
61.wave-group .bar:before {
62  left: 50%;
63}
64
65.wave-group .bar:after {
66  right: 50%;
67}
68
69.wave-group .input:focus ~ .bar:before,
70.wave-group .input:focus ~ .bar:after {
71  width: 50%;
72}
73