1.login-box {
2  position: absolute;
3  top: 50%;
4  left: 50%;
5  width: 400px;
6  padding: 40px;
7  margin: 20px auto;
8  transform: translate(-50%, -55%);
9  background: rgba(0,0,0,.9);
10  box-sizing: border-box;
11  box-shadow: 0 15px 25px rgba(0,0,0,.6);
12  border-radius: 10px;
13}
14
15.login-box p:first-child {
16  margin: 0 0 30px;
17  padding: 0;
18  color: #fff;
19  text-align: center;
20  font-size: 1.5rem;
21  font-weight: bold;
22  letter-spacing: 1px;
23}
24
25.login-box .user-box {
26  position: relative;
27}
28
29.login-box .user-box input {
30  width: 100%;
31  padding: 10px 0;
32  font-size: 16px;
33  color: #fff;
34  margin-bottom: 30px;
35  border: none;
36  border-bottom: 1px solid #fff;
37  outline: none;
38  background: transparent;
39}
40
41.login-box .user-box label {
42  position: absolute;
43  top: 0;
44  left: 0;
45  padding: 10px 0;
46  font-size: 16px;
47  color: #fff;
48  pointer-events: none;
49  transition: .5s;
50}
51
52.login-box .user-box input:focus ~ label,
53.login-box .user-box input:valid ~ label {
54  top: -20px;
55  left: 0;
56  color: #fff;
57  font-size: 12px;
58}
59
60.login-box form a {
61  position: relative;
62  display: inline-block;
63  padding: 10px 20px;
64  font-weight: bold;
65  color: #fff;
66  font-size: 16px;
67  text-decoration: none;
68  text-transform: uppercase;
69  overflow: hidden;
70  transition: .5s;
71  margin-top: 40px;
72  letter-spacing: 3px
73}
74
75.login-box a:hover {
76  background: #fff;
77  color: #272727;
78  border-radius: 5px;
79}
80
81.login-box a span {
82  position: absolute;
83  display: block;
84}
85
86.login-box a span:nth-child(1) {
87  top: 0;
88  left: -100%;
89  width: 100%;
90  height: 2px;
91  background: linear-gradient(90deg, transparent, #fff);
92  animation: btn-anim1 1.5s linear infinite;
93}
94
95@keyframes btn-anim1 {
96  0% {
97    left: -100%;
98  }
99
100  50%,100% {
101    left: 100%;
102  }
103}
104
105.login-box a span:nth-child(2) {
106  top: -100%;
107  right: 0;
108  width: 2px;
109  height: 100%;
110  background: linear-gradient(180deg, transparent, #fff);
111  animation: btn-anim2 1.5s linear infinite;
112  animation-delay: .375s
113}
114
115@keyframes btn-anim2 {
116  0% {
117    top: -100%;
118  }
119
120  50%,100% {
121    top: 100%;
122  }
123}
124
125.login-box a span:nth-child(3) {
126  bottom: 0;
127  right: -100%;
128  width: 100%;
129  height: 2px;
130  background: linear-gradient(270deg, transparent, #fff);
131  animation: btn-anim3 1.5s linear infinite;
132  animation-delay: .75s
133}
134
135@keyframes btn-anim3 {
136  0% {
137    right: -100%;
138  }
139
140  50%,100% {
141    right: 100%;
142  }
143}
144
145.login-box a span:nth-child(4) {
146  bottom: -100%;
147  left: 0;
148  width: 2px;
149  height: 100%;
150  background: linear-gradient(360deg, transparent, #fff);
151  animation: btn-anim4 1.5s linear infinite;
152  animation-delay: 1.125s
153}
154
155@keyframes btn-anim4 {
156  0% {
157    bottom: -100%;
158  }
159
160  50%,100% {
161    bottom: 100%;
162  }
163}
164
165.login-box p:last-child {
166  color: #aaa;
167  font-size: 14px;
168}
169
170.login-box a.a2 {
171  color: #fff;
172  text-decoration: none;
173}
174
175.login-box a.a2:hover {
176  background: transparent;
177  color: #aaa;
178  border-radius: 5px;
179}