Button by LeHuyHieu

1.btn {
2  outline: none;
3  display: inline-block;
4  border: 1px solid #fff;
5  padding: .8rem 2rem;
6  border-radius: 5px;
7  background: transparent;
8  color: #fff;
9  font-size: 1rem;
10  transition: .3s;
11  cursor: pointer;
12  position: relative;
13}
14
15.btn::before {
16  content: '';
17  position: absolute;
18  left: 5px;
19  top: 5px;
20  border-top: 2px solid #fff;
21  border-left: 2px solid #fff;
22  width: 0px;
23  height: 0px;
24  opacity: 0;
25  transition: .3s;
26}
27
28.btn::after {
29  content: '';
30  position: absolute;
31  right: 5px;
32  bottom: 5px;
33  border-bottom: 2px solid #fff;
34  border-right: 2px solid #fff;
35  width: 0px;
36  height: 0px;
37  opacity: 0;
38  transition: .3s;
39}
40
41.btn:hover {
42  box-shadow: 4px 4px 10px rgb(184, 184, 184);
43  transform: translateY(-5px);
44}
45
46.btn:hover::after, .btn:hover::before {
47  height: 20px;
48  width: 20px;
49  opacity: 1;
50}