1.login-box {
2  position: absolute;
3  top: 50%;
4  left: 50%;
5  width: 400px;
6  padding: 40px;
7  transform: translate(-50%, -50%);
8  background: rgba(24, 20, 20, 0.987);
9  box-sizing: border-box;
10  box-shadow: 0 15px 25px rgba(0,0,0,.6);
11  border-radius: 10px;
12}
13
14.login-box .user-box {
15  position: relative;
16}
17
18.login-box .user-box input {
19  width: 100%;
20  padding: 10px 0;
21  font-size: 16px;
22  color: #fff;
23  margin-bottom: 30px;
24  border: none;
25  border-bottom: 1px solid #fff;
26  outline: none;
27  background: transparent;
28}
29
30.login-box .user-box label {
31  position: absolute;
32  top: 0;
33  left: 0;
34  padding: 10px 0;
35  font-size: 16px;
36  color: #fff;
37  pointer-events: none;
38  transition: .5s;
39}
40
41.login-box .user-box input:focus ~ label,
42.login-box .user-box input:valid ~ label {
43  top: -20px;
44  left: 0;
45  color: #bdb8b8;
46  font-size: 12px;
47}
48
49.login-box form a {
50  position: relative;
51  display: inline-block;
52  padding: 10px 20px;
53  color: #ffffff;
54  font-size: 16px;
55  text-decoration: none;
56  text-transform: uppercase;
57  overflow: hidden;
58  transition: .5s;
59  margin-top: 40px;
60  letter-spacing: 4px
61}
62
63.login-box a:hover {
64  background: #03f40f;
65  color: #fff;
66  border-radius: 5px;
67  box-shadow: 0 0 5px #03f40f,
68              0 0 25px #03f40f,
69              0 0 50px #03f40f,
70              0 0 100px #03f40f;
71}
72
73.login-box a span {
74  position: absolute;
75  display: block;
76}
77
78@keyframes btn-anim1 {
79  0% {
80    left: -100%;
81  }
82
83  50%,100% {
84    left: 100%;
85  }
86}
87
88.login-box a span:nth-child(1) {
89  bottom: 2px;
90  left: -100%;
91  width: 100%;
92  height: 2px;
93  background: linear-gradient(90deg, transparent, #03f40f);
94  animation: btn-anim1 2s linear infinite;
95}