Input by abdullah-sameh

1.input-container {
2  position: relative;
3}
4
5.input {
6  padding: 10px;
7  height: 40px;
8  border: 2px solid #0B2447;
9  border-top: none;
10  font-size: 16px;
11  background: transparent;
12  outline: none;
13  box-shadow: 7px 7px 0px 0px #0B2447;
14  transition: all 0.5s;
15}
16
17.input:focus {
18  box-shadow: none;
19  transition: all 0.5s;
20}
21
22.label {
23  position: absolute;
24  top: 10px;
25  left: 10px;
26  color: #0B2447;
27  transition: all 0.5s;
28  transform: scale(0);
29  z-index: -1;
30}
31
32.input-container .topline {
33  position: absolute;
34  content: "";
35  background-color: #0B2447;
36  width: 0%;
37  height: 2px;
38  right: 0;
39  top: 0;
40  transition: all 0.5s;
41}
42
43.input-container input[type="text"]:focus ~ .topline {
44  width: 35%;
45  transition: all 0.5s;
46}
47
48.input-container .underline {
49  position: absolute;
50  content: "";
51  background-color: #0B2447;
52  width: 0%;
53  height: 2px;
54  right: 0;
55  bottom: 0;
56  transition: all 0.5s;
57}
58
59.input-container input[type="text"]:focus ~ .underline {
60  width: 100%;
61  transition: all 0.5s;
62}
63
64.input-container input[type="text"]:focus ~ .label {
65  top: -10px;
66  transform: scale(1);
67  transition: all 0.5s;
68}